LearnThe Absolute Beginner’ s Guide to CoffeeScript

CoffeeScript stał się coraz bardziej popularny w ciągu ostatnich kilku lat ze względu na jego przyjęcie przez węzeł.społeczności js i Rails. Przyjrzyjmy się, dlaczego stało się to językiem go-to, gdy ludzie chcą pisać JavaScript w swoich aplikacjach.

co to jest CoffeeScript?

CoffeeScript jest językiem kompilowanym do JavaScript. Kod w .pliki coffee nie są interpretowane w czasie wykonywania, jak JavaScript, ale są kompilowane do .Pliki js.

czy piszesz dla JavaScript dla węzła.js lub dowolna implementacja danej przeglądarki, CoffeeScript może być napisany dla wszystkich smaków JavaScript.

dlaczego CoffeeScript?

w przeszłości JavaScript nie miał najlepszej reputacji ze względu na mentalność kopiowania i wklejania z Lat 90-tych i wczesnych 2000-tych, wydawało się, że tylko nieliczni mieli pojęcie, co się dzieje. Był postrzegany jako Niezbyt „poważny” język. Jednak JavaScript jako język ma wiele do zaoferowania i ma kilka super funkcji.

CoffeeScript wykorzystuje potężne funkcje JavaScript bez uczenia się mniej znanych funkcji JavaScript, dodając „cukier składniowy” do JavaScript. CoffeeScript nie ma średników i nawiasów klamrowych, podobnych do składni takich jak Python i Ruby.

oznacza to, że możesz pisać mniej kodu i robić rzeczy szybciej. Ułatwia również czytanie i konserwację.

ze względu na optymalizacje CoffeeScript używa, gdy jest skompilowany, wynikowy JavaScript jest tak samo wydajny lub w niektórych przypadkach jest jeszcze bardziej wydajny niż ręcznie napisany kod.

możesz dowiedzieć się wiele o JavaScript, patrząc na JavaScript, który coffeescript kompiluje do. Jeśli widzisz tam coś nowego, zbadaj to i zobacz, dlaczego CoffeScript kompiluje się w ten sposób, a nie to, do czego przywykłeś.

instalacja CoffeeScript

zainstalujmy CoffeeScript, abyś mógł podążać za nim. CoffeeScript jest węzłem.pakiet js. Więc to zależy od węzła.JS i menedżera pakietów (npm).

na OS X

.js można zainstalować za pomocą Homebrew, menedżera pakietów open source dla OS X. Możesz przejrzeć proces instalacji Homebrew tutaj.

upewnij się, że Homebrew jest aktualny, wpisującbrew update w terminalu.

formuła Homebrew dla węzła.js to node. Więc zainstalować węzeł.js wpisujesz brew install node w swoim terminalu. Postępuj zgodnie z dodatkowymi instrukcjami, które pojawiają się, jeśli chcesz zmienić PATHs lub coś podobnego.

następnie wpisznpm install -g coffee-script, aby zainstalować go globalnie.

w systemie Windows

odwiedź węzeł.stronę js i nacisnąć przycisk” Zainstaluj”. Powinien automatycznie wykryć twój smak systemu Windows, którego używasz,a instalator rozpocznie pobieranie.

przejdź przez proces instalacji.

Po zainstalowaniu otwórz wiersz polecenia i wpisz npm install -g coffee-script, aby zainstalować go globalnie.

I wreszcie

wpiszcoffee -v w wierszu poleceń, aby zobaczyć, że został poprawnie zainstalowany.

użycie linii poleceń

kompilatorcoffee może być używany na kilka sposobów. Oto kilka, aby zobaczyć, co jest dostępne.

Uruchom i skompiluj

poniższe polecenie skompiluje wszystkie pliki.coffee w folderze o nazwiecoffeescripts do.js w równoległej strukturze drzewa wjavascripts / div > folder.

coffee -o javascripts/ -c coffeescripts/

Ostrzeżenie

opcja-c oznacza kompilację, a-o oznacza folder wyjściowy. Uwaga zamówienie jest wyprowadzane, a następnie kompilowane. To dlatego, że jeśli zmienisz kolejność nie działa!

Watcher

uruchamianie powyższego polecenia za każdym razem, gdy chcesz skompilować pliki CoffeeScript, więc jest inna przydatna opcja do użycia,-w.

coffee -w -o javascripts/ -c coffeescripts/

obserwator słucha zmian w plikach w folderzecoffeescripts I kompiluje je w locie.

jeśli dodasz nowy plik do coffeescripts powinien się skompilować, jednak jeśli dodasz nowy folder i plik CoffeeScript wewnątrz, nie zostanie on skompilowany. Może się to zmienić w późniejszych wersjach.

łączenie plików

Możesz również skompilować wszystkie pliki .coffee do jednego pliku JavaScript. Zmniejszy to liczbę żądań HTTP, które przeglądarka musi wykonać, i poprawi wydajność. Aby to zrobić, użyj opcji -j w ten sposób:

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

* jest operatorem wieloznacznym.

REPL

Jeśli wpiszeszcoffee bez żadnych opcji otworzy się interaktywna powłoka. Jest to podobne do irb w Ruby. Jest to świetne narzędzie do rzeczy w konsoli i wykonywania szybkich eksperymentów.

podświetlanie edytora tekstu

Jeśli masz zamiar kodować w CoffeeScript, najlepszym rozwiązaniem jest podświetlanie składni.

TextMate

Jeremy Ashkenas, wynalazca CoffeeScript, stworzył poręczny pakiet TextMate. Instrukcje instalacji można znaleźć tutaj.

Sublime Text 2

Sublime Text 2 ma wtyczkę stworzoną przez użytkownika GitHub xavura. Możesz go zainstalować za pomocą SUBLIME Package Control, jeśli już go posiadasz.

dobre rzeczy, a.k.a. składnia

zmienne

zmienne w CoffeeScript nie wymagają słowa kluczowegovar. Po prostu nazwij zmienną, znak równości, a następnie wartość.

year = 1985speed = 88

ciągi znaków

są zadeklarowane z cudzysłowami, tak jak w większości innych języków.

first_name = "Marty"

aby połączyć lub połączyć ciągi znaków, możesz wyświetlić je jeden po drugim z symbolem plusa pomiędzy, w ten sposób:

full_name = first_name + " McFly"

Możesz również dołączyć symbol skrótu (#), a następnie klamry, a w obrębie tych zmienna łańcuchowa.

full_name = "#{first_name} McFly"

powyższe dwa przykłady tworzą łańcuchMarty McFly.

ten drugi typ interpolacji łańcuchów znaków działa tylko wtedy, gdy używasz cudzysłowów podwójnych. Jeśli używasz pojedynczych cudzysłowów, tekst jest wyświetlany „tak jak jest”. Pojedyncze łańcuchy cytatów są ciągami dosłownymi.

full_name = '#{first_name} McFly'

więc powyższe będzie ciągiem#{first_name} McFly. To odzwierciedla zachowanie.

funkcje

funkcje są deklarowane przez nazwanie funkcji, znak równości, a następnie specjalny symbol funkcji (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

nie użyliśmy słowa kluczowegoreturn, ponieważ każda funkcja w CoffeeScript zwraca wynik ostatniego wiersza kodu.

funkcje Wielowierszowe są zapisywane na wielu liniach, przy czym każda linia po deklaracji ma przed nią białą spację.

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

to ustawia rok na1885 za każdym razem. Jeśli chcemy, aby Rok był o wiele bardziej elastyczny, ale miał wartość domyślną, możemy go przenieść do metody declaraion w następujący sposób:

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

oznacza to, że możemy wywołać to z jedną wartością speedyear będzie zawsze domyślnie 1885.

 initialize_time_circuits(88)

Możesz również wywoływać metody bez użycia nawiasów. Powyższe można również zapisać w następujący sposób:

 initialize_time_circuits 88

Tablice

istnieje kilka różnych sposobów inicjowania i deklarowania tablic w CoffeeScript. Prawdopodobnie jesteś przyzwyczajony do wyświetlania tablic zadeklarowanych nawiasami kwadratowymi i wartości oddzielonych przecinkami.

 mcflys = 

Możesz również zadeklarować tablice na wielu liniach w ten sposób:

 mcflys = 

musisz mieć białe spacje na każdej linii.

opcjonalnie możesz usunąć końcowy przecinek z każdej linii.

 mcflys = 

Możesz również użyć kombinacji tych dwóch stylów deklaracji.

poniższy przykład…

woah = 

…jest odpowiednikiem:

woah = 

, który może być mniej lub bardziej czytelny w zależności od aplikacji. CoffeeScript pozwala zrobić to na wiele sposobów, aby spełnić twoje potrzeby.

Obiekty

literały lub skróty obiektów mogą być zadeklarowane tak jak ich odpowiedniki JavaScript i na kilka innych funky sposobów.

biorąc pod uwagę następujący JSON…

…możesz upuścić przecinki i nawiasy klamrowe:

tak długo, jak wciśniesz trochę białej spacji, struktura zostanie zagnieżdżona tak, jak można się spodziewać.

zakresy

zakresy są zadeklarowane za pomocą dwóch liczb całkowitych oddzielonych dwoma okresami, zawiniętych w nawiasy kwadratowe.

days = 

zakresy nie są standardowym typem obiektu w Javascript, więc są kompilowane do tablic.

aby uzyskać podzbiór tablicy, możesz przekazać go również w zakresie. Chcesz uzyskać dni od tuesday_to_friday gdzie poniedziałek jest 1 a niedziela jest 7? Ponieważ tablice są indeksowane od zera, zaczynamy od 1, a kończymy na 4.

days = tuesday_to_friday = days

Możesz również w podobny sposób zastępować całe sekcje tablic.

następujący…

days = 

modyfikujedays array na.

Możesz również użyć zakresów do odliczania, na przykład byłoby10 do0.

Splat

splat jest wygodnym sposobem akceptowania wielu wartości jako argumentów metod.

w poniższym przykładzie chcemy przyznać punkty kudos grupie użytkowników forum za liczbę postów w danym tygodniu.

pierwsza osoba dostaje 10 punktów, druga 6, trzecia 2, a każda inna dostanie jeden punkt.

stwórzmy funkcję,giveKudos zfirstsecond Ithird jako parametrami. Dla reszty dobrze użyj splata, który jest nazwą zmiennej, po której następują 3 okresy. W ramach metodygiveKudos wywołajmy niezrealizowaną addKudosToUser, która pobiera dwa parametry, użytkownika i punkty, które mają zostać dodane. Nie będziemy się martwić o implementację to tylko dla celów ilustracyjnych.

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

następnie możemy użyćfor in, aby zapętlićrest.

biorąc pod uwagę, że mamy tablicę użytkowników:

users = 

chcemy, aby Pasan zdobył 10 punktów, Amit 6, Jim 2, a reszta 1.

musimy przekazać użytkownikom z kropkami do metody, aby poprawnie przypisać wartości tablicy do parametrów takich jak:

giveKudos users...

bez tych okresów, users get jest przypisany do first parametr i undefined do reszty.

klasy

klasy mogą być zadeklarowane trywialnie w CoffeeScript, co jest odświeżającym kontrastem do znacznie bardziej gadatliwego JavaScript.

najpierw wpisz słowo kluczoweclass, a następnie nazwę twojej klasy.

metody, w tym metoda konstruktora, są zapisywane z nazwą metody, po której następuje dwukropek. Przed każdą nazwą Metody potrzebne są białe spacje. Następnie można użyć operatora funkcji (->).

class TimeMachine constructor: ->

aby utworzyć instancję obiektu, użyj słowa kluczowegonew, po którym następuje nazwa klasy.

time_machine = new TimeMachine

zmienne instancji

zmienne instancji zaczynają się od symbolu@. Więc możemy mieć pilota

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

możesz uzyskać do nich dostęp za pomocą notacji kropkowej.

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

w powyższym przykładzie łańcuchH. G. Wells zostanie wydrukowany na konsoli.

zamiast ustawiania@pilot = pilot możesz zapisać go w skrócie w następujący sposób:

class TimeMachine constructor: (@pilot) ->

dziedziczenie klas

aby napisać podklasę, możesz użyć extends w ten sposób:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

powiedzmy, żeTimeMachine ma metodęgo z jednym parametrem, który zostaje wylogowany, gdy Wehikuł Czasu ma podróżować w czasie.

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

teraz dla każdego implementacji time machine go i wywołajmysuper metoda.

więc wywołanie go() na instancjach obu wehikułów czasu wydrukuje swój własny dźwięk.

składnia Ogólna

dzięki CoffeeScript Twój kod będzie wyglądał bardziej jak zdanie w języku angielskim:

który jest taki sam jak:

light_bulbs() unless switch is not on

chociaż ten drugi jest trudniejszy do przeanalizowania niż pierwszy, pokazuje zakres nowego cukru.

oto tabela odpowiedników ze strony dokumentacji CoffeeScript na operatory i aliasy.

CoffeeScript	JavaScript
is	= = =
isnt	!= =
nie	!
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 (?).

powiedzmy, że user nie zalogował się i został jeszcze ustawiony. Chcesz, aby funkcja logowania została wywołana, jeśli nie ma user, wtedy po prostu użyj operatora egzystencjalnego w ten sposób:

login() if not user?

Możesz również ustawić wartości domyślne w ten sposób:

year ?= 1885

Możesz użyć operatora egzystencjalnego w podobny sposób do trójstronnego operatora. Poniższy przykład ustawia powitanie na message, jeśli nie undefined lub ciąg ’ Hello, World!”.

greeting = message ? "Hello, World!"

wreszcie istnieje wariant accessora, który można wykorzystać do absorbowanianull referencji podczas łączenia właściwości.

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

więc zamiast podnieśćTypeError to zwróciundefined.

składanie

może sprawić, że Twój kod będzie bardziej czytelny. W naszym przykładzie kudos mieliśmy pętlę for przechodzącą przez dwie linie, kiedy mogliśmy zapisać ją w jednej linii w ten sposób:

kolejną fajną cechą zapętlania rzeczy w CoffeeScript jest to, że pętla zwraca tablicę wyników tej pętli. Powiedzmy, że chcę policzyć od 0 do 100 przez wielokrotność 10. Wszystko, co robię, to poprzedzam moją pętlę przypisaniem zmiennych w ten sposób:

multiples = for num in num * 10

dodając nawiasy możesz również przenieść ją do jednej linii!

multiples = (num * 10 for num in )

podsumowanie

To było dużo do przyjęcia, ale jak widać CoffeeScript jest pełen smakowitych słodkich składni. Dlaczego nie dać mu bash w następnym projekcie JavaScript i zobaczyć, co kompiluje się pod maską?

• przewodnik dla początkujących coffeescript
• coffeescript
• naucz się programowania
• stwórz stronę internetową