Řekněme to, JavaScript neměl vždy nejlepší pověst mezi vývojáři, a od založení CoffeeScript zpět v roce 2009 tento malý jazyk vzal svět JavaScript vývojářů bouří; hlavně proto, že překonává to, co někteří mohou říct, že je nejhorší aspekt jazyka JavaScript: syntaxe jeho kódu.
Přestože se jedná o nový jazyk, zvednete to opravdu rychle, hlavně proto, že je přeformulován JavaScript; je to v podstatě hezčí, jednodušší JavaScript.
Při psaní programu CoffeeScript nezapomeňte, že píšete kód, který před nasazením bude kompilován do jazyka JavaScript, který bude vycházet z osvědčených postupů a předá test JSLint, takže je to ještě jedna věc, o kterou se budete muset starat. Výstup bude i nadále platný, že prohlížeč nebude mít problém při čtení. CoffeeScript je určen pro JavaScript, co je SASS pro CSS: způsob, jak napsat jednoduchý a produktivnější kód.
CoffeeScript je nástroj node.js, takže pro jeho instalaci je třeba nainstalovat node.js stejně jako správce balíčků uzlů. Za předpokladu, že jste nainstalovali tyto dva balíčky, stačí pouze přejít na váš terminál a nainstalovat CoffeeScript s správcem balíčků pomocí kódu:
npm install -g coffee-scriptJen s tím, že máte na počítači nainstalován nástroj CoffeeScript. Pro zkompilování souboru COFF do souboru JavaScript je třeba zadat:
coffee --compile script.coffeeTo bude kompilovat soubor script.coffee do script.js ve stejném adresáři, ale bude to dělat jen při spuštění příkazu, pokud chcete, aby kompilace v každé změně, kterou uděláte v kávovaru musíte přidat -watch dříve kompilace:
coffee --watch --compile script.coffeeS tímto přidáním bude váš JavaScript kompilován pokaždé, když provedete změnu vašeho souboru .coffee.
Při psaní proměnné JavaScriptu musíme předložit klíčové slovo var, protože s klíčovým slovem GoScriver je toto klíčové slovo pryč a můžete prostě napsat proměnnou a přiřadit ji k něčemu. Další věc, na kterou je třeba se zaměřit, je, že CoffeeScript používá spoustu intentračních metod, aby se zabránilo polovičním bodům a aby jazyk pochopil, že proměnné je kompletní, stačí se přesunout na nový řádek:
age = 21country = "Portugal"V jazyce JavaScript byste museli zadat něco jako:
var age = 21;var country = "Portugal";Je to malý příklad, ale můžete začít zjistit, jak mocný CoffeeScript je, pokud jde o zjednodušení vašeho kódu.
Nezapomeňte si, že jste strávili celý čas ukládáním do paměti JavaScript operátorů? Nezapomeňte, že jste přemýšleli, proč jste potřebovali použít === místo pouhého použití? No, tak se o to postará i CoffeeScript. Nabízí opravdu pěkné aliasy pro operátory:
Další věc, kterou CoffeeScript zbaví, jsou kudrnaté závorky. Použije metodu odsazení k prohlášení, když jste uvnitř příkazu, pokud příkazy fungují jako JavaScript, ale nepotřebujete kudrnaté závorky nebo závorky; stačí odsadit kód, který chcete spustit, když je příkaz true:
if work > 24 and sleep < 8vacations()elsework()bude kompilovat do jazyka JavaScript jako:
if (work > 24 && sleep < 8) {vacations();} else {work();}Doufám, že začínáte vidět výhody CoffeeScriptu jen s těmito jednoduchými ukázkami, jak čistý může udělat váš kód a čistší kód znamená více udržovatelný kód.
Smyčka pomocí polí je jednou z věcí, které musíte udělat v každé aplikaci JavaScriptu, kterou píšete, a syntaxe pro její smyčku v jazyce JavaScript není nejjednodušší nebo nejčistší, myslím, že to je místo, kde CoffeeScript opravdu svítí. Pro smyčku přes pole používáme for..in smyčku, jako například:
tasks = ['Design','Code','Groceries']for task in tasksalert taskCelá tato část kódu bude číst všechny věci v poli a pak upozornit pak jeden po druhém, jen aby se věci ještě jednodušší můžete dokonce napsat pro ... v smyčce v jedné řadě, jako je tomu tak:
tasks = ['Design','Code','Groceries']alert task for task in tasksJe to jednoduše mnohem srozumitelnější a udržovatelnější než je Java vanilla, mluvení o tom, že kód vytvořený společností CoffeeScript pro tyto dva řádky by byl:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Zatímco smyčky jsou také velmi užitečné při vytváření vaší aplikace JavaScriptu a CoffeeScript nezabrání tomu, aby to bylo jednodušší i pro čtení a psaní, například:
while sleep < 8sleep()Nebo můžete napsat vše na jednom řádku, pokud dáváte přednost:
while sleep < 8 then sleep()Nebo:
sleep() until sleep > 8V čistém jazyce JavaScript by se převedl na:
//thenwhile (sleep < 8) {sleep();}Nebo:
//untilwhile (!(sleep > 8)) {sleep();}Funkce jsou také další důležitou součástí libovolného programovacího jazyka a i když funkce v jazyce JavaScript nejsou tak špinavé jako některé další části CoffeeScript to zjednodušuje i na max, což je jednoduchá funkce, která vezme jméno někoho a pak upozorní, že to může být napsáno takhle :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Jediné, co děláte, je pojmenování funkce, v tomto případě se funkce nazývá sayHi a poté po rovnoměrném znaku je třeba zadat parametry. Zde je název jediný parametr, po definování základny naší funkce je třeba zadat -> následovat na dalším řádku podle toho, co chceme funkci dělat tak, že CoffeeScript ví, že jsme uvnitř funkce. V tomto případě chci jen to, abych vrátil "Dobrý den" a pak jméno osoby a nakonec jsem použil jednoduchou výstrahu k volání funkce s názvem. Můžeme také psát toto v jednom řádku eliminující zadání a odsazení jen psáním, co bude funkce dělat po ->:
sayHi = (name) -> return "Hello " + nameTento malý úryvek kódu bude kompilován do následujícího JavaScript:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Samozřejmě, že to byla opravdu jednoduchá funkce, ale jak můžete vidět, že nám to zachránila 3 řádky kódu a samozřejmě v jazyce JavaScript jsme mohli jen proměnnou pojmenovat, když deklarujeme funkci takhle:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Příklady, které jsem zde uvedl, jsou kompilovány v jazyce CoffeeScript a přestože ve většině případů existují snadnější způsoby, jak něco napsat, všechny kompilované jazyky Java jsou platné a sémantické.
To je jen začátek toho, co vám může nabídnout CoffeeScript, když se věci začnou zkomplikovat, tento malý jazyk vám ve srovnání s JavaScriptem poskytne spoustu možností, méně kódu, který potřebujete psát, více čitelných kódů pro člověka a více udržovatelných , abyste se mohli o rok později vrátit na web a vědět, co se děje v tomto jazyce JavaScript.
Zůstaňte naladěni na druhou část této série, kde vám ukážeme, jak kombinovat CoffeeScript s jQuery a LocalStorage, abyste vytvořili jednoduchou aplikaci pro seznam kontaktů.
Používali jste CoffeeScript k zjednodušení JavaScriptu? Jaké části aplikace CoffeeScript dáváte přednost Javascriptu? Dejte nám vědět v komentářích.