LearnThe Ghidul începătorului absolut pentru CoffeeScript

CoffeeScript a devenit din ce în ce mai popular în ultimii ani datorită adoptării sale de către nod.comunitățile JS și Rails. Să aruncăm o privire de ce a devenit limba de acces atunci când oamenii doresc să scrie JavaScript în aplicațiile lor.

ce este CoffeeScript?

CoffeeScript este un limbaj care este compilat în JavaScript. Cod în .fișierele de cafea nu sunt interpretate în timpul rulării, cum ar fi JavaScript, dar sunt compilate în .js fișiere.

fie că scrieți pentru JavaScript pentru nod.js sau punerea în aplicare orice browser dat, CoffeeScript poate fi scris pentru orice și toate arome de JavaScript.

De ce CoffeeScript?

în trecut, JavaScript nu a avut cea mai stelară reputație datorită mentalității copy-and-paste din anii 90 și începutul anilor 2000, se părea că doar câțiva aveau idee despre ce se întâmplă. A fost privit în jos ca un limbaj nu atât de” serios”. Cu toate acestea, JavaScript ca limbă are multe de oferit și are câteva caracteristici super.CoffeeScript folosește caracteristicile puternice ale JavaScript fără a învăța caracteristicile mai puțin cunoscute ale JavaScript prin adăugarea de” zahăr sintactic ” la JavaScript. CoffeeScript nu are semi-două puncte și bretele buclat, sintaxă similară cu place de Python și Ruby.

aceasta înseamnă că puteți scrie mai puțin cod și puteți face lucrurile mai repede. De asemenea, face mai ușor de citit și de întreținut.

datorită optimizărilor pe care CoffeeScript le folosește, atunci când este compilat în jos, JavaScript-ul rezultat este la fel de performant sau, în unele cazuri, este chiar mai performant decât codul scris de mână.

puteți afla multe despre JavaScript uitându-vă la JavaScript pe care CoffeeScript îl compilează. Dacă există ceva nou pe care îl vedeți acolo, cercetați-l și vedeți de ce CoffeScript compilează în acest fel, mai degrabă decât ceea ce sunteți obișnuiți să vedeți.

instalarea CoffeeScript

să instalați CoffeeScript astfel încât să puteți urmări de-a lungul. CoffeeScript este un nod.pachetul js. Deci depinde de nod.js și managerul de pachete (npm).

pe OS X

nod.js poate fi instalat folosind Homebrew, un manager de pachete open source pentru OS X. Puteți examina procesul de instalare al Homebrew aici.

asigurați-vă că Homebrew este actualizat tastândbrew update în terminalul dvs.

Formula Homebrew pentru nod.js estenode. Deci, pentru a instala nod.js introduceți brew install node în terminalul dvs. Urmați orice instrucțiuni suplimentare care apar dacă trebuie să modificați PATH s sau ceva de genul acesta.

apoi tastaținpm install -g coffee-script pentru a-l instala la nivel global.

pe Windows

vizitați Nodul.site-ul js și apăsați butonul „Install”. Ar trebui să detecteze automat aroma Windows pe care o utilizați și un program de instalare va începe să se descarce.

treceți prin procesul de instalare.

odată instalat, deschideți promptul de comandă și tastaținpm install -g coffee-script pentru a-l instala la nivel global.

și în final

tastațicoffee -v în linia de comandă pentru a vedea că a fost instalat corect.

utilizarea liniei de comandă

compilatorulcoffee poate fi utilizat în mai multe moduri. Iată un cuplu pentru a vedea ce este disponibil.

rulați și compilați

următoarea comandă va compila toate fișierele .coffee într-un folder numit coffeescripts la .js într-o structură arborescentă paralelă în javascripts dosar.

coffee -o javascripts/ -c coffeescripts/

avertisment

opțiunea-c înseamnă a compila și-o înseamnă folderul de ieșire. Notă comanda este de ieșire, apoi compilați. Acest lucru se datorează faptului că dacă comutați comanda nu funcționează!

Watcher

rularea comenzii de mai sus de fiecare dată când doriți să compilați fișiere CoffeeScript astfel încât nu există o altă opțiune la îndemână pentru a utiliza,-w.

coffee -w -o javascripts/ -c coffeescripts/

Observatorul ascultă modificările fișierelor din folderulcoffeescripts și le compilează din mers.

dacă adăugați un fișier nou lacoffeescripts folderul ar trebui să compileze, cu toate acestea, dacă adăugați un folder nou și un fișier CoffeeScript în interiorul că acesta nu va fi compilat. Acest lucru s-ar putea schimba în versiunile ulterioare.

alăturarea fișierelor

de asemenea, puteți compila toate fișierele.coffee într-un singur fișier JavaScript. Acest lucru va reduce numărul de cereri HTTP pe care un browser trebuie să le facă și să îmbunătățească performanța. Pentru a face acest lucru, utilizați-j opțiune de genul:

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

* este un operator wildcard.

REPL

dacă tastațicoffee fără opțiuni se deschide un shell interactiv. Acest lucru este similar cuirb în Ruby. Acesta este un instrument excelent pentru lucrurile din consolă și pentru efectuarea de experimente rapide.

editor de Text subliniind

dacă ai de gând să cod în CoffeeScript cel mai bun lucru de făcut este să aibă evidențierea sintaxei.

TextMate

Jeremy Ashkenas, inventatorul CoffeeScript, a creat un pachet TextMate la îndemână. Pentru instrucțiuni de instalare du-te aici.

Sublime Text 2

Sublime Text 2 are un plugin creat de utilizatorul GitHub Xavura. Puteți instala acest lucru prin controlul Sublime Package, dacă aveți deja acest lucru.

lucrurile bune alias sintaxa

variabile

variabilele din CoffeeScript nu necesită cuvântul cheievar. Pur și simplu denumiți variabila dvs., un semn egal și apoi valoarea.

year = 1985speed = 88

siruri de caractere

siruri de caractere sunt declarate cu ghilimele ca în cele mai multe alte limbi.

first_name = "Marty"

pentru a uni sau concatena șiruri de caractere, le puteți enumera una după alta cu un simbol plus între ele, astfel:

full_name = first_name + " McFly"

puteți include și simbolul hash (#), urmat de bretele buclate, iar în cadrul acestora șirul variabilă.

full_name = "#{first_name} McFly"

cele două exemple de mai sus ar crea șirulMarty McFly.

ultimul tip de interpolare șir funcționează numai atunci când utilizați ghilimele duble. Dacă utilizați ghilimele simple, textul este afișat”ca atare”. Siruri de caractere singur citat sunt siruri de caractere literale.

full_name = '#{first_name} McFly'

deci cele de mai sus vor fi șirul#{first_name} McFly. Acest comportament oglindește.funcțiile

sunt declarate prin Denumirea funcției, semn egal și apoi un simbol special al funcției (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

nu am folosit cuvântul cheiereturn deoarece fiecare funcție din CoffeeScript returnează rezultatul ultimei linii de cod.

funcțiile multi-căptușite sunt scrise pe mai multe linii, fiecare linie după declarație având un spațiu alb înaintea ei.

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

aceasta ar seta anul la 1885 de fiecare dată. Dacă vrem ca Anul să fie mult mai flexibil, dar să aibă o valoare implicită, îl putem aduce în declarația metodei astfel:

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

aceasta va însemna că putem apela acest lucru cu o valoare a speedyear va fi întotdeauna implicit la 1885.

 initialize_time_circuits(88)

de asemenea, puteți apela metode fără a utiliza paranteze. Cele de mai sus pot fi, de asemenea, scrise ca:

 initialize_time_circuits 88

matrice

există mai multe moduri diferite de a inițializa și declara matrice în CoffeeScript. Probabil că sunteți obișnuiți să vedeți tablouri declarate cu paranteze pătrate și valori separate prin virgule.

 mcflys = 

de asemenea, puteți declara matrice pe mai multe linii astfel:

 mcflys = 

trebuie să aveți spațiu alb pe fiecare linie.

opțional, puteți elimina virgula finală din fiecare linie.

 mcflys = 

puteți utiliza, de asemenea, o combinație a acestor două stiluri de declarație.

următorul exemplu…

woah = 

…este echivalentul a:

woah = 

care poate fi mai mult sau mai puțin lizibil în funcție de aplicația dvs. CoffeeScript vă permite să o faceți într-o varietate de moduri pentru a se potrivi nevoilor dumneavoastră.

obiecte

literali obiect sau hashes pot fi declarate ca omologii lor JavaScript și în alte moduri funky.

având în vedere următorul JSON…

…puteți arunca virgulele și bretelele buclate:

atâta timp cât Indentați cu un spațiu alb, structura se imbrică așa cum v-ați aștepta.

intervalele

intervalele sunt declarate de două numere întregi separate de două perioade, înfășurate între paranteze pătrate.

days = 

intervalele nu sunt un tip de obiect standard în Javascript, astfel încât acestea să fie compilate în matrice.

pentru a obține o sub-secțiune a unui tablou puteți trece într-un interval prea. Doriți să obțineți zile de la tuesday_to_friday unde luni este 1 și duminică este 7? Din moment ce matrice sunt indexate bazate pe zero, am începe de la 1 și se termină la 4.

days = tuesday_to_friday = days

puteți înlocui secțiuni întregi de matrice într-un mod similar.

următoarele…

days = 

modificădays matrice pentru a fi.

puteți utiliza intervale pentru numărătoarea inversă prea de exemplu ar fi10 la0.

bulină

o bulină este o modalitate convenabilă de a accepta mai multe valori ca argumente pentru metode.

în exemplul următor dorim să acordăm puncte kudos unui grup de utilizatori ai forumului pentru numărul de postări dintr-o săptămână dată.

prima persoană primește 10 puncte, a doua primește 6, a treia primește 2 și fiecare altcineva va primi un singur punct.

să creăm o funcție,giveKudos cufirstsecond șithird ca parametri. Pentru restul bine utilizați o bulină, care este numele variabilei urmată de 3 perioade. În cadrul metodeigiveKudos să numim un neimplementataddKudosToUser care ia doi parametri, utilizatorul și punctele care trebuie adăugate. Nu ne vom face griji cu privire la punerea în aplicare este doar pentru scopuri ilustrative.

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

în continuare putem folosi unfor in pentru a trece pesterest.

având în vedere că avem o serie de utilizatori:

users = 

vrem ca Pasan să obțină 10 puncte, Amit să obțină 6, Jim să obțină 2 și apoi restul să obțină 1.

trebuie să trecem în utilizatori cu perioadele în metoda de a atribui în mod corespunzător valorile matrice la parametrii de genul:

giveKudos users...

fără aceste perioade, users get este atribuit first parametru și undefined pentru restul.

clasele

clasele pot fi declarate trivial în CoffeeScript, care este un contrast revigorant cu JavaScript mult mai detaliat.

scrieți Mai întâi cuvântul cheieclass, urmat de numele clasei dvs.

metodele, inclusiv metoda constructorului, sunt scrise cu numele metodei urmate de două puncte. Este nevoie de spațiu alb înainte de fiecare nume de metodă. Puteți utiliza apoi operatorul de funcții (->).

class TimeMachine constructor: ->

pentru a instantia o instanta a unui obiect, folositi cuvantul cheie new urmat de numele clasei.

time_machine = new TimeMachine

variabile de instanță

variabilele de instanță încep cu un simbol@. Deci, putem avea un pilot

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

le puteți accesa prin notație punct prea.

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

în exemplul de mai sus, șirulH. G. Wells va fi tipărit în consolă.

în loc să setați@pilot = pilot îl puteți scrie în stenografie astfel:

class TimeMachine constructor: (@pilot) ->

moștenirea clasei

pentru a scrie o subclasă puteți utiliza extends ca aceasta:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

să spunemTimeMachine are o metodăgo cu un parametru care se deconectează atunci când mașina timpului este pe cale să călătorească în timp.

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

acum hai pentru fiecare mașină a timpului să implementăm și să apelăm metodasuper.

deci, de asteptarego() pe instanțe ale ambelor mașini de timp va imprima propriul sunet respectiv.

sintaxa generală

cu CoffeeScript veți găsi codul în căutarea mai mult ca o propoziție în limba engleză:

light_bulbs() if switch is on

care este la fel ca:

light_bulbs() unless switch is not on

în timp ce acesta din urmă este mai greu de analizat decât primul, vă arată domeniul de aplicare al noului zahăr.

Iată un tabel de echivalenți din pagina de documentare CoffeeScript privind operatorii și pseudonimele.

CoffeeScript

JavaScript
este	= = =
nu este	!= =
nu	!
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 (?).

să spunem dacă unuser nu s-a conectat și a fost setat încă. Doriți ca funcția de conectare să fie apelată dacă user nu este prezent, atunci folosiți operatorul existențial astfel:

login() if not user?

puteți seta, de asemenea, valori implicite astfel:

year ?= 1885

puteți utiliza operatorul existențial într-un mod similar la un operator ternar. Următorul exemplu ar seta salutul să fie message, dacă nu undefined sau șirul ` ” Bună ziua, lume!”.

greeting = message ? "Hello, World!"

În cele din urmă există o variantă accessor pe care o puteți utiliza absorbinull referințe atunci când înlănțuiți proprietățile împreună.

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

deci, în loc de a ridica unTypeError acest lucru ar reveniundefined.

Comprehensions

Comprehensions poate face Codul mai ușor de citit. În exemplul nostru kudos am avut for bucla trecând peste două linii, când am fi putut să o scriem pe o singură linie ca aceasta:

o altă caracteristică interesantă a looping-ului asupra lucrurilor din CoffeeScript este că bucla returnează o serie de rezultate ale acelei bucle. Să presupunem că vreau să număr de la 0 la 100 în multipli de 10. Tot ce fac este să prepend bucla mea cu o atribuire variabilă ca așa:

multiples = for num in num * 10

adăugarea paranteze puteți aduce pe o linie prea!

multiples = (num * 10 for num in )

concluzie

Woah! Asta a fost o mulțime de a lua în, dar după cum puteți vedea CoffeeScript este plin de sintaxă zaharoase gustoase. De ce să nu-i dați o petrecere în următorul dvs. proiect JavaScript și să vedeți ce compilează sub capotă?

• Ghidul începătorului pentru coffeescript
• coffeescript
• aflați programarea
• creați un site web