Spójrzmy prawdzie w oczy, JavaScript nie zawsze miał najlepszą reputację wśród programistów, a od założenia CoffeeScript już w 2009 r. Ten mały język podjął świat twórców JavaScriptu przez burzę; głównie dlatego, że pokonuje to, co niektórzy mogą powiedzieć, jest najgorszym aspektem JavaScriptu: składnią jego kodu.
Mimo że jest to nowy język, bardzo szybko uzyskasz go, ponieważ jest to formatowany JavaScript; jest to w zasadzie ładniejszy, prostszy JavaScript.
Pisząc CoffeeScript nie zapominaj, że piszesz kod, który przed wdrożeniem zostanie skompilowany do JavaScriptu, który będzie zgodny z najlepszymi praktykami i przejdzie test JSLint, a więc o jedno mniej, o co musisz się martwić. Dane wyjściowe nadal będą prawidłowym kodem JavaScript, który przeglądarka nie będzie miała problemu z odczytaniem. CoffeeScript ma na celu JavaScript, co SASS jest do CSS: sposób na napisanie prostszego i bardziej produktywnego kodu.
CoffeeScript to narzędzie node.js, więc aby go zainstalować, musisz mieć zainstalowany node.js, a także menedżer pakietów węzła. Zakładając, że zainstalowałeś te dwa pakiety, wszystko, co musisz zrobić, to przejść do terminala i zainstalować CoffeeScript z menedżerem pakietów, używając kodu:
npm install -g coffee-scriptWłaśnie z tym masz na maszynie zainstalowany CoffeeScript. Aby skompilować plik .coffee do pliku JavaScript, musisz wpisać:
coffee --compile script.coffeeSpowoduje to skompilowanie pliku script.coffee do script.js w tym samym katalogu, ale zrobi to tylko po uruchomieniu polecenia, jeśli chcesz go skompilować przy każdej zmianie wprowadzonej w pliku kawy, musisz dodać zegarek kompilacja:
coffee --watch --compile script.coffeeDzięki temu Twój JavaScript będzie kompilowany za każdym razem, gdy dokonasz zmiany w pliku .coffee.
Pisząc zmienną JavaScript musimy poprzedzić słowo kluczowe var, używając CoffeeScriptu, w którym słowo kluczowe zniknęło i możesz po prostu wpisać zmienną i przypisać ją do czegoś. Inną rzeczą, na którą należy zwrócić uwagę, jest to, że CoffeeScript używa wielu metod wcięcia, aby uniknąć średników i aby język zrozumiał, że instrukcja zmiennej jest kompletna, wystarczy przejść do nowej linii:
age = 21country = "Portugal"W JavaScript należy wpisać coś takiego:
var age = 21;var country = "Portugal";To mały przykład, ale możesz zacząć widzieć, jak potężny jest CoffeeScript, jeśli chodzi o uproszczenie kodu.
Pamiętasz cały ten czas spędzony na zapamiętywaniu operatorów JavaScript? Pamiętaj, zastanawiając się, dlaczego musisz użyć === zamiast po prostu używać? Dobrze też zajmuje się tym CoffeeScript. Oferuje kilka naprawdę fajnych aliasów dla operatorów:
Kolejną rzeczą, z której CoffeeScript się pozbywa, są nawiasy klamrowe. Używa metody wcięcia, aby zadeklarować, kiedy znajdujesz się w instrukcji, jeśli instrukcje działają jak JavaScript, ale nie potrzebujesz nawiasów klamrowych ani nawiasów; po prostu wciskaj kod, który chcesz uruchomić, gdy wyrażenie jest prawdziwe:
if work > 24 and sleep < 8vacations()elsework()skompiluje się do JavaScript jako:
if (work > 24 && sleep < 8) {vacations();} else {work();}Mam nadzieję, że zaczynasz dostrzegać zalety CoffeeScript właśnie dzięki tym prostym pokazom, jak czysty może on sprawić twój kod, a czystszy kod oznacza łatwiejszy w utrzymaniu kod.
Zapętlanie przez tablice jest jedną z rzeczy, które musisz zrobić w każdej napisanej aplikacji JavaScript, a składnia do ich zapętlenia w JavaScript nie jest najprostsza lub najczystsza, myślę, że właśnie tutaj CoffeeScript naprawdę świeci. Aby przechodzić przez macierz, używamy pętli for..in, tak jak poniżej:
tasks = ['Design','Code','Groceries']for task in tasksalert taskWszystko, co zrobi ten kod, to odczytanie wszystkich rzeczy z tablicy, a następnie powiadomienie, jeden po drugim, aby jeszcze prostsze rzeczy można nawet napisać dla ... w pętli w jednym wierszu, jak na przykład:
tasks = ['Design','Code','Groceries']alert task for task in tasksJest po prostu o wiele bardziej czytelny i łatwiejszy do utrzymania niż vanilla JavaScript, o którym kod stworzony przez CoffeeScript dla tych dwóch linii byłby:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Pętle są również bardzo przydatne podczas konstruowania aplikacji JavaScript, a obsługa CoffeeScript nie ułatwia również czytania i pisania, na przykład:
while sleep < 8sleep()Lub możesz napisać wszystko w jednym wierszu, jeśli wolisz:
while sleep < 8 then sleep()Lub:
sleep() until sleep > 8W czystej wersji JavaScript oznacza to:
//thenwhile (sleep < 8) {sleep();}Lub:
//untilwhile (!(sleep > 8)) {sleep();}Funkcje są również ważną częścią każdego języka programowania i nawet jeśli funkcje JavaScript nie są tak niechlujne, jak niektóre inne części CoffeeScript upraszcza to również do maksimum, prosta funkcja, która bierze czyjeś imię, a następnie ostrzega, że może być napisana w ten sposób :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Wszystko, co robisz, to nazwa funkcji, w tym przypadku funkcje nazywają się sayHi, a następnie po znaku równości należy określić parametry. Tutaj nazwa jest pojedynczym parametrem, po zdefiniowaniu podstawy naszej funkcji musimy wpisać -> po następnej linii, co chcemy, aby funkcja działała tak, aby CoffeeScript wiedział, że jesteśmy wewnątrz funkcji. W tym przypadku wszystko, co chcę to zrobić, to zwrócenie "Hello", a następnie nazwisko osoby i na końcu używam prostego alertu, aby wywołać funkcję z nazwą. Możemy również napisać to w jednym wierszu, eliminując wpis i wcięcie, pisząc, co funkcja zrobi po ->:
sayHi = (name) -> return "Hello " + nameTen mały fragment kodu zostanie wkompilowany w następujący kod JavaScript:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Oczywiście była to bardzo prosta funkcja, ale jak widać, zaoszczędziło nam to 3 wiersze kodu i oczywiście w JavaScript mogliśmy po prostu nazwać zmienną, ponieważ deklarujemy taką funkcję:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Przykłady, które tutaj podałem, to to, do czego kompiluje się CoffeeScript i chociaż w większości przypadków istnieją łatwiejsze sposoby na napisanie czegoś, wszystkie skompilowane JavaScript są poprawne i semantyczne.
To tylko początek tego, co daje CoffeeScript, kiedy rzeczy zaczynają się komplikować, ten mały język da ci dużo dźwigni w porównaniu do JavaScript, mniej kodu, który musisz napisać, kod bardziej czytelny dla człowieka i łatwiejszy w utrzymaniu , abyś mógł wrócić do strony internetowej rok później i wiedzieć, co się dzieje w tym kodzie JavaScript.
Wkrótce zapoznaj się z drugą częścią tej serii, w której pokażę, jak połączyć CoffeeScript z jQuery i LocalStorage, aby stworzyć prostą aplikację listy kontaktów.
Czy użyłeś CoffeeScript, aby uprościć JavaScript? Jakie części CoffeeScript preferujesz w JavaScript? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz kawy przez Shutterstock.