LearnThe Absolutní Začátečník Průvodce CoffeeScript

CoffeeScript se stává stále více populární v posledních několika letech kvůli jeho přijetí do Uzlu.komunity js a Rails. Pojďme se podívat, proč se to stalo jazykem go – to, když lidé chtějí psát JavaScript ve svých aplikacích.

co je CoffeeScript?

CoffeeScript je jazyk, který se zkompiluje do JavaScriptu. Kód dovnitř .kávové soubory nejsou interpretovány v době běhu, jako je JavaScript, ale jsou kompilovány do .soubory js.

ať už píšete pro JavaScript pro uzel.JS nebo implementace daného prohlížeče, CoffeeScript může být napsán pro všechny příchutě JavaScriptu.

proč CoffeeScript?

V minulosti, JavaScript nemá zrovna hvězdnou pověst kvůli kopírovat-a-vložit mentalita 90. let a počátku roku 2000, zdálo se, že jen málo tušil, co se děje. Bylo to pohlíženo dolů jako na ne tak „vážný“ jazyk. JavaScript jako jazyk však má co nabídnout a má některé super funkce.

CoffeeScript využívá výkonných funkcí JavaScriptu, aniž by se naučil méně známé funkce JavaScriptu přidáním“ syntaktického cukru “ do JavaScriptu. CoffeeScript nemá polodrážky a kudrnaté rovnátka, podobná syntaxi jako Python a Ruby.

to znamená, že můžete psát méně kódu a dělat věci rychleji. To také usnadňuje čtení a údržbu.

díky optimalizacím CoffeeScript používá, když je zkompilován, výsledný JavaScript je stejně výkonný nebo v některých případech je ještě výkonnější než ručně psaný kód.

můžete se dozvědět hodně o JavaScriptu při pohledu na JavaScript, který CoffeeScript sestavuje dolů. Pokud tam vidíte něco nového, prozkoumejte to a zjistěte, proč CoffeScript kompiluje spíše než to, na co jste zvyklí.

instalace CoffeeScript

pojďme nainstalovat CoffeeScript, takže můžete sledovat spolu. CoffeeScript je uzel.balíček js. Záleží tedy na uzlu.JS a správce balíčků (npm).

na OS X

uzlu.js lze nainstalovat pomocí Homebrew, správce balíčků s otevřeným zdrojovým kódem pro OS X.proces instalace Homebrew si můžete prohlédnout zde.

ujistěte Se, že jste Homebrew je aktuální zadáním brew update v terminálu.

Homebrew vzorec pro uzel.JS je node. Takže nainstalovat uzel.js do svého terminálu zadáte brew install node. Postupujte podle dalších pokynů, které se objeví, pokud potřebujete změnit PATH s nebo něco podobného.

potom zadejte npm install -g coffee-script a nainstalujte jej globálně.

v systému Windows

navštivte uzel.webové stránky js a stiskněte tlačítko“ Instalovat“. Měl by automaticky detekovat vaši chuť systému Windows, který používáte, a instalační program se začne stahovat.

projděte procesem instalace.

po instalaci otevřete příkazový řádek a zadejte npm install -g coffee-script a nainstalujte jej globálně.

a nakonec

zadejte coffee -v do příkazového řádku, abyste viděli, že byl správně nainstalován.

použití příkazového řádku

překladač coffee lze použít několika způsoby. Zde je pár, abyste viděli, co je k dispozici.

Spustit a Zkompilovat

následující příkaz zkompilovat všechny své .coffee soubory ve složce s názvem coffeescripts.js soubory v paralelním stromové struktuře v javascripts složka.

coffee -o javascripts/ -c coffeescripts/

Upozornění

možnost -c znamená sestavit a -o znamená, že výstupní složku. Všimněte si, že objednání je výstup pak kompilovat. Je to proto, že pokud přepnete objednávku, nefunguje to!

Watcher

spuštění výše uvedeného příkazu pokaždé, když chcete kompilovat soubory CoffeeScript, takže je tu další užitečná možnost použití, -w.

coffee -w -o javascripts/ -c coffeescripts/

pozorovatel poslouchá změny souborů ve složce coffeescripts a sestavuje je za běhu.

pokud přidáte nový soubor do coffeescripts složka by měla kompilovat, Nicméně pokud přidáte novou složku a soubor CoffeeScript uvnitř, že nebude kompilován. To by se mohlo změnit v pozdějších verzích.

spojování souborů

můžete také zkompilovat všechny soubory .coffee do jednoho souboru JavaScript. Tím se sníží počet požadavků HTTP, které musí prohlížeč provést, a zlepší se výkon. K tomu použijte -j možnost tak jako:

coffee -j javascripts/app.js -c coffeescripts/*.coffee

* je zástupný operátor.

REPL

Pokud zadáte coffee bez jakýchkoli možností, otevře se interaktivní shell. Toto je podobné irb v Ruby. To je skvělý nástroj pro věci v konzole a provádění rychlých experimentů.

zvýraznění textového editoru

Pokud se chystáte kódovat v CoffeeScript, nejlepší je mít zvýraznění syntaxe.

TextMate

Jeremy Ashkenas, CoffeeScript vynálezce, vytvořil šikovný TextMate svazek. Pokyny k instalaci naleznete zde.

Sublime Text 2

Sublime Text 2 má plugin vytvořený uživatelem GitHub Xavura. Můžete jej nainstalovat pomocí ovládacího prvku Sublime Package, pokud to již máte.

Dobré Věci.k.a. Syntaxe

Proměnné

Proměnné v CoffeeScript nevyžadují klíčové slovo var. Jednoduše pojmenujte proměnnou, znaménko rovná se a poté hodnotu.

year = 1985speed = 88

řetězce

řetězce jsou deklarovány uvozovkami jako ve většině ostatních jazyků.

first_name = "Marty"

připojit nebo zřetězit řetězce, můžete jejich seznam, jeden po druhém, s plus symbol v mezi, jako je tento:

full_name = first_name + " McFly"

můžete také zahrnout hash symbol (#), následují složené závorky a v nich se řetězec proměnné.

full_name = "#{first_name} McFly"

výše uvedené dva příklady by vytvořily řetězec Marty McFly.

druhý typ interpolace řetězců funguje pouze při použití dvojitých uvozovek. Pokud používáte jednoduché uvozovky, text se zobrazí „tak, jak je“. Jednoduché řetězce citace jsou doslovné řetězce.

full_name = '#{first_name} McFly'

takže výše uvedený bude řetězec #{first_name} McFly. To odráží chování.

funkce

funkce jsou deklarovány pojmenováním funkce, rovná se znaménko a poté speciální symbol funkce (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

Jsme nepoužili klíčové slovo return protože každá funkce v CoffeeScript vrátí výsledek poslední řádek kódu.

funkce s více linkami se zapisují na více řádcích, přičemž každý řádek za deklarací má před sebou nějaké prázdné místo.

initialize_time_circuits = -> year = 1885 year * flux_capacitor_constant * speed

To by nastavilo rok na 1885 pokaždé. Pokud chceme, aby rok být mnohem více flexibilní, ale mají výchozí můžeme přivést ji až do metody declaraion, jako je tento:

initialize_time_circuits = (speed, year = 1885) -> year * flux_capacitor_constant * speed

To bude znamenat, pak můžeme volat s jedním hodnota speedyear budou vždy výchozí 1885.

 initialize_time_circuits(88)

můžete také volat metody bez použití závorek. Výše uvedené můžeme také zapsat jako:

 initialize_time_circuits 88

Pole

Existuje několik různých způsobů, jak deklarovat, inicializovat a pole v CoffeeScript. Pravděpodobně jste zvyklí vidět pole deklarovaná hranatými závorkami a hodnotami oddělenými čárkami.

 mcflys = 

můžete také deklarovat pole přes více linek, jako je tento:

 mcflys = 

Budete muset mít bílé místo na každém řádku.

Volitelně můžete odstranit koncovou čárku z každého řádku.

 mcflys = 

můžete také použít kombinaci těchto dvou prohlášení styly.

následující příklad…

woah = 

…je ekvivalentní:

woah = 

, Které mohou být více či méně čitelné v závislosti na aplikaci. CoffeeScript vám to umožňuje různými způsoby, aby vyhovoval vašim potřebám.

objekty

objektové literály nebo hashe mohou být deklarovány jako jejich protějšky JavaScriptu a jinými funky způsoby.

vzhledem k následujícímu JSON …

… můžete zrušit čárky a složené závorky:

Pokud odsadíte nějaké bílé místo, struktura se vnoří, jak byste očekávali.

se Pohybuje

Rozsahy jsou deklarovány dvě celočíselné odděleny dvě období, zabalené v hranatých závorkách.

days = 

rozsahy nejsou standardním typem objektu v JavaScriptu, takže se zkompilují do polí.

Chcete-li získat podsekci pole, můžete projít také v rozsahu. Chcete získat dny od tuesday_to_friday kde pondělí je 1 a neděle je 7? Vzhledem k tomu, že pole jsou indexována na základě nuly, začneme na 1 a končíme na 4.

days = tuesday_to_friday = days

podobným způsobem můžete nahradit i celé části polí.

následující…

days = 

Změní days pole .

můžete použít pohybuje na odpočet také například 100.

Splat

splat je pohodlný způsob, jak přijmout více hodnot jako argumenty metod.

v následujícím příkladu chceme udělit kudos body skupině uživatelů fóra za počet příspěvků v daném týdnu.

první osoba dostane 10 bodů, druhá dostane 6, třetí dostane 2 a každý další získá jeden bod.

Pojďme vytvořit funkci, giveKudosfirstsecondthird jako parametry. Pro zbytek dobře použijte splat, což je název proměnné následovaný 3 tečkami. V giveKudos metoda řekněme o nerealizovaných addKudosToUser která přebírá dva parametry, uživatel a body, které mají být přidány. Nebudeme se starat o implementaci, je to jen pro ilustraci.

giveKudos = (first, second, third, rest...) -> addKudosToUser first, 10 addKudosToUser second, 6 addKudosToUser third, 2

dále můžeme použít for in do smyčky přes rest.

vzhledem k tomu, že máme řadu uživatelů:

users = 

chceme, aby Pasan získal 10 bodů, Amit 6, Jim 2 a zbytek 1.

potřebujeme předat uživatelům období v metodě správně přiřadit pole hodnoty parametrů, jako je tento:

giveKudos users...

Bez těchto obdobích, users je přiřazena first parametr a undefined zbytek.

třídy

třídy lze v CoffeeScript deklarovat triviálně, což je Osvěžující kontrast k mnohem podrobnějšímu JavaScriptu.

nejprve napište klíčové slovo class a poté název vaší třídy.

metody, včetně metody konstruktoru, se zapisují s názvem Metody následovaným dvojtečkou. Před každým názvem metody je zapotřebí bílé místo. Poté můžete použít funkci operátor (->).

class TimeMachine constructor: ->

instanci instanci objektu, použijte klíčové slovo new následuje název třídy.

time_machine = new TimeMachine

Proměnné Instance

proměnné Instance začít s @ symbol. Takže můžeme mít pilot

class TimeMachine constructor: (pilot) -> @pilot = pilot

můžete k nim přistupovat pomocí tečkové notace.

class TimeMachine constructor: (pilot) -> @pilot = pilot time_machine = new TimeMachine "H. G. Wells"console.log time_machine.pilot

ve výše uvedeném příkladu bude řetězec H. G. Wells vytištěn na konzoli.

Namísto nastavení @pilot = pilot můžete psát těsnopisem, jako je tento:

class TimeMachine constructor: (@pilot) ->

Class Dědictví

napsat podtřídy můžete použít extends :

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

řekněme TimeMachine metoda go s jedním parametrem, který dostane odhlášen, když je Stroj Času cestovat v čase.

class TimeMachine constructor: (@pilot) -> go: (noise) -> console.log noise

Nyní pojďme pro každý stroj času implementovat a zavolat metodu super.

takže volání go() na instancích obou časových strojů vytiskne vlastní příslušný zvuk.

Obecná syntaxe

s CoffeeScript zjistíte, že váš kód vypadá spíše jako věta v angličtině:

light_bulbs() if switch is on

Což je totéž jako:

light_bulbs() unless switch is not on

Zatímco ten druhý je těžší analyzovat, než bývalý, to se ukáže působnosti nového cukr.

zde je tabulka ekvivalentů ze stránky dokumentace CoffeeScript o operátorech a Aliasech.

CoffeeScript	JavaScript
	===
ne	!= =
ne	!
and	&&
or	||
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	no JS equivalent

Existential Operator

CoffeeScript brings another cool operator to the table called the Existential Operator, which is a question mark (?).

řekněme, že user se ještě nepřihlásilo a nebylo nastaveno. Chcete přihlašovací funkce se bude jmenovat, pokud user není přítomen, pak stačí použít Existenční Operátor tak jako:

login() if not user?

můžete také nastavit výchozí hodnoty:

year ?= 1885

můžete použít Existenciální Subjekt v podobné cestě k ternární operátor. Následující příklad by nastavit pozdrav být buď message, ne-li undefined nebo řetězec“Hello, World!“.

greeting = message ? "Hello, World!"

Konečně je tu accessor varianta, které můžete použít absorbovat až null odkazy, když jste řetězení vlastnosti dohromady.

ip = securitySystem.lastUser?().remoteSystem?.ipAddress

Takže místo zvyšování TypeError vrátí undefined.

porozumění

porozumění může váš kód čitelnější. V našem příkladu kudos jsme měli smyčku for procházející dvěma řádky, když jsme ji mohli napsat na jeden řádek, jako je tento:

Další skvělou vlastností opakování věcí v CoffeeScript je, že smyčka vrací pole výsledků této smyčky. Řekněme, že chci počítat od 0 do 100 v násobcích 10. Vše, co jsem udělat, je předřadit moje smyčky, s proměnnou úkol jako tak:

multiples = for num in num * 10

Přidání závorky můžete uvést ji na jeden řádek!

multiples = (num * 10 for num in )

závěr

Woah! To bylo hodně, ale jak vidíte, CoffeeScript je plný chutné sladké syntaxe. Proč ne dát to bash ve svém příštím projektu JavaScript a uvidíme, co to zkompiluje až pod kapotou?

• průvodce pro začátečníky k coffeescript
• coffeescript
• Naučte se programování
• vytvořte web