Share
Nu există două modalități: industria de dezvoltare web poate fi incredibil de dură. Este una care ne cere să ne educăm în mod continuu pe parcursul carierelor noastre. Luați-i câțiva ani și, dintr-o dată, vă veți găsi îngropați de noi cadre, instrumente, bune practici și preprocesoare. Așa e, kiddies, dacă vrei să fii un dezvoltator de web, ar fi bine să fii în regulă cu ideea că școala ta nu se va termina niciodată (și nu vrei să o faci).
CoffeeScript.org ar trebui să fie prima dvs. oprire, atunci când învățați CoffeeScript. Documentația sa este fantastică. Odată ce recunoaștem că un anumit procent din fiecare săptămână ar trebui să ne cheltuim pentru a ne adapta abilitățile și pentru a învăța lucruri noi, determinarea a ceea ce, în mod special, de a ne investi timpul, devine incredibil de importantă. Aparent, în fiecare zi, noi biblioteci sau instrumente sunt puse la dispoziția publicului. Dar aceasta nu înseamnă că ar trebui să aruncăm prudență (și timp) spre vânt și să-i îmbrățișăm pe toți; deloc. Desigur, păstrează o minte curioasă, dar un nivel sănătos de scepticism este de o importanță capitală.
În mod inevitabil, însă, anumite instrumente sară rapid în partea de sus a listei "noi și strălucitoare".
Acestea sunt tipurile care au potențialul de a redefini modul în care construim webul. jQuery a redefinit modul în care interogăm și lucrăm cu DOM. Backbone.js ajută dezvoltatorii să își transforme codul de spaghete în module bine structurate și întreținute. Și, poate, CoffeeScript va reinventa modul în care scriem fizic JavaScript-ul nostru.
Există doar o problemă: CoffeeScript nu adaugă nimic nou în limba JavaScript; oferă doar o sintaxă îmbunătățită (mulți ar spune drastic îmbunătățită), care este în cele din urmă compilate în JavaScript obișnuit. Deci, dilema noastră este: într-un mediu care deja ne cere să învățăm nenumărate limbi, tehnici și modele, merită investiția timpului să înveți încă un alt preprocesor? Ei bine, în timp ce răspunsul la această întrebare poate fi cu siguranță dezbătut, în opinia acestui scriitor, trebuie absolut să vă grăbiți!
Este posibil ca acesta să fie primul pe care l-ați auzit despre CoffeeScript. Dacă da, nu vă îngrijorați; abia acum începe să absoarbă cu adevărat aburii în întreaga comunitate de dezvoltare.
În esența sa, CoffeeScript, creat de Jeremy Ashkenas, transformă ceea ce unii ar numi "urât JavaScript" în cod curat și succint. Nu extinde funcționalitatea limbii JavaScript; ea doar întinde o sintaxă mai frumoasă.
Cea mai bună modalitate de a demonstra ce oferă CoffeeScript este să faceți o plimbare prin sintaxa.
Fila "Încercați CoffeeScript" la CoffeeScript.org oferă compilație în timp real; este o modalitate excelentă de a juca cu sintaxa.) Dacă doriți pur și simplu să jucați cu sintaxa, vizitați CoffeeScript.org și faceți clic pe fila "Încercați cafea". Pe de altă parte, dacă doriți să instalați CoffeeScript local, asigurați-vă că aveți instalate pe sistem copii ale copierilor Node.js și npm (Node Package Manager). Nu-ți face griji; este ușor.
Apoi, CoffeeScript poate fi instalat din linia de comandă:
npm install -g cafea-script
Asta e! Sunteți gata să mergeți. La ceas un fișier, script.coffee, și compilați-o script.js de fiecare dată când fișierul este salvat, în linia de comandă, navigați la root-ul proiectului și tastați:
coffee - watch --compile script.coffee
În plus, numeroși editori, cum ar fi TextMate și Sublime Text 2, oferă pachete care transformă acest proces de construire într-un simplu clic-cheie. Ca opțiune alternativă, consultați aplicațiile, cum ar fi LiveReload și CodeKit, care vă vor ocupa automat sarcina "vizionați și compilați".
LiveReload automatizează procesul de vizionare și compilare a fișierelor CoffeeScript.) Luați în considerare următorul fragment de cod:
var foo = 'bar'; var bar = 'baz';
În CoffeeScript, var nu ar trebui folosite niciodată; de fapt, motorul va arunca o eroare dacă încercați să faceți acest lucru. În schimb, toate variabilele sunt automat declarate în domeniul de aplicare curent - ceea ce înseamnă că nu mai trebuie să ne facem griji că ar trebui să se creeze accidental variabile globale urâte.
Codul de mai sus poate fi rescris ca:
foo = 'bar' bar = 'baz'
Când codul este în cele din urmă compilat la JavaScript obișnuit, ambele nume de variabile vor fi declarate în partea superioară a domeniului funcției și apoi atribuite corespunzător, după cum urmează:
var bar, foo; foo = 'bar'; bar = 'baz';
O mulțime de dezvoltatori JavaScript urăsc faptul că toate expresiile ar trebui să se încheie cu un punct și virgulă.
var foo = 'bar';
Din punct de vedere tehnic, veți observa că, frecvent, puteți să scăpați prin oprirea punct și virgulă; dar, cu toate acestea, s-au implicat în această abordare și sa considerat o bună practică să le includem întotdeauna pentru o asigurare maximă.
În CoffeeScript, cu toate acestea, putem să ne luăm la revedere pentru totdeauna. Ca atare, fragmentul de cod anterior poate fi modificat pentru a:
foo = 'bar'
Luând semnale suplimentare de la limbi precum Ruby, în CoffeeScript, paranteza, de asemenea, poate fi de multe ori omisă. Acest lucru transformă JavaScript tradițional, cum ar fi:
dacă (presupunem === 10) result = 'corect';
în:
dacă ghiciți == 10 rezultat = 'corect'
Chiar mai bine, putem fi mai succint folosind un modifiant de declarație:
rezultat = 'corect' daca ghici == 10
Mult mai curat și mai ușor de citit, nu? "A stabilit rezultat pentru a "corecta" dacă ghici variabila este egală cu 10. "Excelent!
Rețineți că CoffeeScript compilează toate
==în versiunea strictă a egalității,===, așa cum recomandăm instrumentele, cum ar fi JS Lint.
Veți găsi rapid că, în CoffeeScript, același bloc de cod poate fi rescris în mai multe moduri. Deși sunteți liberi să îi ignorați, aliasurile permit comparații mai ușor de citit de om. Următoarele grupări sunt identice în funcționalitate și compilație.
// lansarea egalității == lansarea 'go' este 'go' // lansarea inegalității! = lansarea 'go' isnt 'go' // nu se întoarce false if! goForFlight return false dacă nu goForFlight return false dacă goForFlight // true return true întoarcere la întoarcere da // returnare falsă returnare falsă returnare nu // și goForFlight && lansare () goForFlight și lansare () // sau goForFlight || prepare () goForFlight sau pregăti ()
Funcțiile sunt o zonă cheie în care sintaxa este considerabil diferită de JavaScript. O funcție tradițională care determină dacă ziua plății - sau vineri - ar putea să arate ca:
var payDay = funcția () returnează data nouă (). getDay () === 5; // este vineri?
Într-o încercare de a curăța dezordinea, cu CoffeeScript, această funcție poate fi rescrisă ca:
payDay = - noua dată (). getDay () == 5
Alternativ, putem plasa întregul fragment de cod pe o singură linie.
payDay = - noua dată (). getDay () == 5
Există două lucruri cheie care merită notate aici:
Accentsconagua
funcţie() a fost înlocuit cu ->.întoarcere cuvântul cheie poate fi eliminat în acest caz special.Orice argumente aplicabile ar trebui plasate în paranteze, înainte de ->. Poate că ziua plății este joi; dacă este așa, funcția poate fi modificată pentru a fi mai flexibilă.
payDay = (zi) -> dată nouă (). getDay () == zi
Dar, dacă vrem să atribuim o zi de plată standard de vineri (sau 5)? În regulat JavaScript, vom face probabil:
var payDay = funcție (zi) ziua || (zi = 5); returnați noua dată (). getDay () === zi;
Cu CoffeeScript, pe de altă parte, putem scurta acest lucru foarte mult.
payDay = (zi = 5) -> dată nouă (). getDay () == zi
Puturos!
Un obiect tipic JavaScript poate fi curățat considerabil în CoffeeScript. Luați în considerare următoarele:
var persoană = picioare: 2, mâini: 2, degete: 10
CoffeeScript ne permite să eliminăm var cuvânt cheie, precum și atât acolade și virgule. Pe o singură linie, totuși, sunt necesare virgule.
persoană = picioare: 2, mâini: 2, degete: 10
Cu toate acestea, dacă plasăm fiecare proprietate pe propria linie, acestea pot fi omise. Același lucru este valabil și pentru matrice.
persoană = picioare: 2 mâini: 2 degete: 10
Important: deoarece funcția CoffeeScript este dependentă de spațiul alb, chiar dacă o singură linie incorectă poate schimba drastic modul în care codul este compilat în JavaScript.
Înțelegerea ne permite să transformăm cu ușurință zece linii de cod în câteva. Este, în esență, o modalitate de a crea expresii pentru a repeta un set de elemente furnizat într-un matrice sau obiect.
De exemplu, mai degrabă decât utilizarea tipic pentru declarația - și "caching-ul" care merge împreună cu iterarea peste o matrice - putem folosi în schimb pentru in.
Să ne imaginăm că trebuie să repetăm o serie de personaje. Cu JavaScript tradițional, am putea face:
caracterele var = ['Marty', 'Doc', 'Biff']; pentru (var i = 0, len = characters.length; i < len; i++ ) console.log("Get %s to the time machine", characters[i]); Cu siguranță nu este destul; dar, dacă folosim în schimb CoffeeScript, poate fi frumos.
caractere = ['Marty', 'Doc', 'Biff'] pentru persoana in caractere console.log "Get% s la masina de timp", persoana
Nu e grozav să scrii? Cu siguranță, nu pot fi singurul!
Așa cum veți găsi în curând, putem folosi interpolarea cu șir pentru a îmbunătăți mai mult codul - dar mă duc înaintea mea.
Există însă o problemă: l-am îndreptat pe Biff la mașina de timp, ceea ce nu este o idee bună. Să modificăm codul pentru a specifica că ar trebui să înregistreze doar șirul la consola cu condiția ca persoana curentă din matrice să nu fie Biff. În CoffeeScript, dacă profităm de filtre, este un cinch.
caractere = ['Marty', 'Doc', 'Biff'] pentru persoana în caractere atunci când persoana nu este 'Biff' console.log "Get% s la mașină de timp", persoană
Da; remedierea a necesitat un total de patru cuvinte citibile de om.
Acum, dacă dorim, putem face aceste bucle mai ușor de citit folosind înțelegerea listei. Pentru a trece prin caractere și înregistrați numele persoanei în consola:
console.log persoană pentru persoana în caractere
Sau, ca un alt exemplu, pentru a prelua toate etichetele ancore din pagină (folosind jQuery's Hartă metoda), stocați fiecare ancora href valoarea într-o matrice și, în final, prin buclă prin matricea respectivă și înregistrarea valorilor în consolă, cu regulat JavaScript, vom face:
var link = $ ('a') hartă (funcție () return this.href;); console.log (links.join (',')); Cu CoffeeScript, cu toate acestea, avem opțiuni mai bune:
console.log (link pentru linkul din $ ('a') map -> @href) .join ',' Ca un exemplu final, dacă am avea o serie de obiecte personale:
oameni = [nume: 'Jeffrey' varsta: 27, nume: 'John' varsta: 13, nume: varsta lui Jan: 42]
Treaba noastră este să creăm o nouă matrice, numită de varsta, și o face să fie egală cu o listă cu numai obiectele, unde vârsta persoanei este de 21 de ani sau mai mult. Din nou, cu JavaScript regulat, vanilla, am putea face:
var ofAge = []; pentru (var i = 0, len = people.length; i < len; i++ ) if ( people[i].age >= 21) ofAge.push (oameni [i]);
Da, este destul de verbose pentru o sarcină atât de simplă. Cu CoffeeScript, să reducem acest lucru la o singură linie, folosind înțelegerea.
ofAge = (p pentru p în cazul persoanelor cu p.age> = 21)
Bam! Prin împachetarea a tot ce apare după semnul egal în paranteză, specificăm că de varsta variabila ar trebui să fie egală cu rezultatele acelei operații, care va fi o matrice. Deci, matricea va fi construită și apoi atribuită de varsta. Când este confuz, citiți pur și simplu expresia de la stânga la dreapta. "Apăsați obiectul persoană pe rezultate array, pentru fiecare persoană în oameni array ... atâta timp cât este persoana lui vârstă proprietatea este mai mare sau egală cu 21. " cand cuvântul cheie se numește filtru și poate fi incredibil de puternic. Recunoașteți-o: începeți să salivați.
În secțiunea anterioară, am folosit o metodă destul de tipică de a lega o variabilă într-un șir.
console.log "Obțineți persoana% la mașina de timp", persoană
Similar cu limbile, cum ar fi Ruby, CoffeeScript oferă interpolarea șirului, prin intermediul # sintaxă. Acest cod poate fi rescris, după cum urmează:
console.log "Obțineți # person] la mașina de timp"
Rețineți că, la fel ca majoritatea limbilor, pentru a profita de interpolarea șirului, trebuie să utilizați citate dublă, mai degrabă decât una singură.
Luați în considerare sarcina destul de obișnuită de a ceda o referință la acest, astfel încât, atunci când contextul se schimbă - cum ar fi în cadrul apelării unui eveniment jQuery obligatoriu - putem accesa încă locația din cache. Iată un exemplu:
var self = aceasta; $ ('h1') on ('clic', funcția () // 'this' se referă acum la ancora pe care a fost făcut clic pe // use self instead of self.someMethod ();); CoffeeScript oferă "săgeata de grăsime", sau =>, care poate fi de mare ajutor. Dacă ne schimbăm -> la =>, în spatele scenei, CoffeeScript va cachea o referință acest. Apoi, în cadrul funcției, toate referințele la acest va fi înlocuit dinamic cu versiunea memorată în memoria cache.
Pentru a ilustra această idee, următorul cod:
$ ('h1') la 'click', => this.someMethod () ... se va compila la:
var _this = aceasta; $ ('h1') pe ('click', functie () return _this.someMethod ();); CoffeeScript oferă ajutor clasă sintaxa, pentru cei care preferă o abordare mai clasică în structurarea codului lor. De exemplu, prin simpla tastare persoană de clasă, CoffeeScript va compila acel cod la:
var Persoana; Persoana = (funcția () funcția Persoană () returnează Persoana;) ();
Observați cum Persoană variabila este egală cu o expresie a funcției de invocare în sine care returnează interiorul Persoană funcţie. Ar trebui să executăm un pic de cod imediat la instanțiere, similar cu PHP __construi metodă, putem pune locul nostru init cod în cadrul constructor metodă a clasă, ca astfel:
clasa Constructor persoană: (nume, vârstă) -> this.name = nume this.age = vârstă
constructor metoda nu poate fi numită în mod explicit; în schimb, acesta este declanșat dinamic când instanțiați clasa. Cu toate acestea, acest cod poate fi îmbunătățit; CoffeeScript oferă niște zahăr suplimentar care îl poate scurta. În @ simbol se va referi întotdeauna la acest, sau instanța lui Persoană. Ca atare, mai degrabă decât this.age, putem folosi în schimb @vârstă, cu care dezvoltatorii Ruby vor fi familiarizați cu. Codul de mai sus poate fi rescris ca:
clasa Constructor persoană: (nume, vârstă) -> @name = nume @age = vârstă
Chiar și mai bine, totuși, putem lua lucrurile cu un pas mai departe. Aceste variabile de instanță pot fi setate într-un mod diferit:
constructor de clase de tip: (@name, @age) ->
Nu e rău, nu? În acest moment, pentru a extinde Persoanăcu prototipul cu metode suplimentare, noi creăm pur și simplu metode noi, în același mod în care adăugăm metode la un obiect. În spatele scenei, CoffeeScript va atașa metoda la prototip. Să adăugăm o metodă care determină anul nașterii persoanei.
constructor de persoane de clasă: (@name, @age) -> getBirthYear: -> new Date () getFullYear () - @age
Acest cod frumos, curat, o dată compilat în JavaScript, va fi:
var Persoana; Persoana = (functie () function Persoana (nume, varsta) this.name = nume; this.age = var; Person.prototype.getBirthYear = function () return. vârstă; returnează persoana;) ();
Deci, am redus efectiv numărul de linii de la șaisprezece până la patru. Pentru a instantiza această nouă clasă, putem scrie:
om = persoană nouă ("Jeffrey", 27) man.getBirthYear () # 1985 Chiar mai bine, pentru a crea clase de copii, care se extind Persoană, trebuie doar să folosim extinde cuvinte cheie:
copilul de clasă extinde persoana
In acest punct, Copil are acum acces la toate proprietățile și metodele din Persoană clasă și le poate trimite sau înlocui dacă doriți.
În ciuda tuturor acestui zahăr glorios, rămânem încă întrebarea: ar trebui să folosim CoffeeScript în producție? Ei bine, John Q. Reader, asta depinde în mare măsură de tine. Există argumente valabile pentru și împotriva ei. Nay-sayers va indica faptul că, pentru că nu lucrați în mod special cu JavaScript compilat, depanarea poate deveni o sarcină mai dificilă. Codul de depanare pe care nu l-ați scris. Asta poate fi o luptă.
"Cred că CoffeeScript este un experiment strălucit. CoffeeScript ia părțile bune și pune o sintaxă minimală pe partea de sus a acesteia, ceea ce este minunat. Nu-i recomand să-l folosiți în producție, pentru că vine cu propria lume a problemelor. - Douglas Crockford "
S-ar putea de asemenea susține că prea multă dependență de abstracții ca aceasta poate avea ca rezultat faptul că dezvoltatorul are o înțelegere mai mică a JavaScript-ului în ansamblu. Deoarece sunt încorporate în compilator atât de multe bune practici, el ușurează sarcina dezvoltatorului de a memora cele mai bune practici, cum ar fi evitarea globalelor și variabilele de ridicare. Indiferent dacă acest tip de automatizare este sau nu un lucru bun, este în dezbatere.
"O bună practică care poate fi aplicată și generată de un compilator este mai bună decât cea mai bună practică care trebuie memorată și scrisă de fiecare dată." - Jeremy Ashkenas
Pentru a juca avocatul diavolului, același lucru ar fi putut fi spus și pentru jQuery. JQuery încurajează o nouă rasă de dezvoltatori care nu învață cu adevărat JavaScript de vanilie? Absolut nu; dacă nu, a asistat foarte mult la renașterea limbajului JavaScript.
În timp ce sintaxa CoffeeScript poate fi inițial mai familiară și mai plăcută pentru dezvoltatorii Ruby și Python care se tem de JavaScript, sperăm că îi va încuraja să se săpare mai profund în limba de bază.
Pentru a colecta mai multe opinii CoffeeScript de la masterat JavaScript - pe ambele părți ale gardului - consultați "Ar trebui să înveți CoffeeScript", de la Nettuts +. ) În cele din urmă, CoffeeScript este doar JavaScript. Acesta oferă o sintaxă frumoasă, care se află pe partea de sus a limbii. Profesorii sunt evideni: codul aderă automat la cele mai bune practici și devine mai scurt, mai puțin predispus la erori și mult mai ușor de citit. Dar, din nou, depanarea, care poate dura o perioadă semnificativă de timp în fluxul de lucru al dezvoltatorului, este o preocupare.
Alegerea este de până la tine! Cât despre a ta cu adevărat, nu-mi pot imagina întoarcerea. Sunt tot cu CoffeeScript.
