Share
Chiar dacă CoffeeScript este o limbă nouă, o veți învăța foarte repede. Ar trebui, din moment ce este doar jurnal JavaScript cu unele haine flashy, la urma urmei. Se citește ca Ruby sau Python, dar se compilează până la un JavaScript pur, non-pufos. Astăzi, vom analiza de ce toată lumea vorbește despre CoffeeScript.
Odată cu apariția unor motoare puternice de tip JavaScript, cum ar fi V8, JavaScript și-a aruncat stigmatul de un instrument împușcat de interacțiuni juvenile și a devenit o entitate destul de puternică. Ea a sărit chiar și de la aplicațiile din partea clientului la partea de server, de exemplu, node.js. Faptul că aderă la o ideologie drăguță, bazată pe prototip, nu-l face nici rău. Nu există nicio îndoială că JavaScript este într-adevăr o limbă critică acum și pentru viitorul previzibil.
Dar am simțit întotdeauna că sintaxa în sine este puțin cam clară. După ce am lucrat cu un amestec de Ruby și Python în ultimii câțiva ani, am descoperit că JavaScript-ul este semi-colon infuzat, dependent de paranteze, sintaxa verbose pentru a fi obositoare. Și din ceea ce pot aduna, nu mă simt singur în acest fel. Acesta este locul în care CoffeeScript vine la salvare!
CoffeeScript se compilează până la JS brut.
CoffeeScript este în esență doar o rescriere sintactică a JavaScript. Limba de bază însăși rămâne aceeași, cu îmbunătățiri semantice mici. Sintaxa este modificată, modelată după Python și Ruby.
Amintiți-vă că compilatorul CoffeeScript scoate curat JavaScript, care nu numai că urmează cele mai bune practici și este eminamente lizibil, dar, de asemenea, trece JSLint. Aceasta înseamnă că nu trebuie să vă faceți griji cu privire la compatibilitatea pe linie. În cel mai rău scenariu al acestui proiect care murdărește, poți doar să ridici JS-ul curat pe care CoffeeScript-ul îl generează și să treacă cu codul tău. Nu sunteți încuiat în acest mediu.
Acest lucru poate părea un concept străin, dar sub umbrela dezvoltării web, am văzut deja partea noastră echitabilă din această ideologie. HAML este doar o nouă modalitate de a scrie HTML, în timp ce SASS face același lucru pentru CSS. Toți aceștia curăță structura și sintaxa limbilor lor, făcându-i mai ușor să lucreze și, prin urmare, ameliorând productivitatea.
Probabil vă întrebați cum arată codul în sine, așa că aici este o privire rapidă:
index = (listă, țintă) -> [scăzut, ridicat] = [0, list.length] în timp ce este scăzut < high mid = (low + high) >> 1 val = listă [mijloc] retur mediu dacă val este țintă dacă val < target then low = mid + 1 else high = mid return -1
Aceasta este o implementare rapidă a unei căutări binare. Nu încercați să analizați codul în sine chiar acum. Doar încercați să vă familiarizați cu sintaxa.
Mai jos este codul JavaScript pe care CoffeeScript generează:
var index; index = funcție (listă, țintă) var mare, scăzut, mediu, val, _ref; _ref = [0, list.length], scăzut = _ref [0], mare = _ref [1]; în timp ce (scăzut < high) mid = (low + high) >> 1; val = list [mijloc]; dacă (val === țintă) retur mediu; dacă (val < target) low = mid + 1; else high = mid; return -1; ;
Iată câteva avantaje și dezavantaje rapide ale utilizării CoffeeScript. Acest lucru nu este cuprinzător prin nici un mijloc, dar cred că acest lucru este suficient pentru a obține o imagine de ansamblu rapidă a sistemului.
Există, desigur, numeroase alte puncte, inclusiv îmbunătățirile semantice și sintactice.
Metodele oficiale pentru a începe să includă un utilitar pentru linia de comandă care rulează sub node.js și pur și simplu să descarce sursa și să o instaleze. Nimic de ghidat aici. Obțineți utilitatea și utilizarea node.js npm instala cafe-script [sau pentru sursa, bin / tort de instalare] pentru a instala și a începe.
Situația cu Windows este ceva mai complicată. Nu există nicio cale directă de a obține node.js sau sursa instalată pe Windows [în afara Cygwin]. Nu te mai freca niciodată. Un număr de oameni întreprinzători au scris compilatoare care funcționează pe Windows. Am inclus câteva elemente de mai jos:
Rețineți că compilatorul, în formularul JavaScript compilat, este, de asemenea, asociat cu sursa, dacă sunteți interesat (ă). Este prezent sub suplimentar director cu un nume evident.
Cu acest lucru din drum, acum vom arunca o privire la o multime de lucruri care vă arată cum CoffeeScript face JavaScript mai ușor de consumat!
Primul lucru pe care trebuie să-l cunoașteți este modul în care CoffeeScript utilizează spațiul alb pentru a simplifica în mod eficient sintaxa. Persoanele cu un background Python vor găsi acest lucru trivial, dar pentru ceilalți, aici este o explicație rapidă.
În primul rând, nu trebuie să terminați fiecare linie cu un semi-colon. Terminarea unei linii este interpretată automat ca fiind sfârșitul acelei instrucțiuni. De exemplu, acest ...
numere = [0, 1, 2, 3] name = "NetTuts +"
... se compilează până la urmă:
numele var, numerele; numere = [0, 1, 2, 3]; nume = "NetTuts +";
Apoi, veți fi bucuroși să știți că puteți să vă îndepărtați cu bretele. Acele numeroase bretele pentru deschiderea și închiderea unui bloc? Totul e afară. În CoffeeScript, folosiți indentarea Python-esque pentru a indica începutul și sfârșitul unui bloc.
CoffeeScript nu necesită paranteze inutile sau bretele curbate.
Iată un exemplu rapid. Nu luați în considerare totul, ci doar indentarea pentru moment. O să ajungem la restul mai târziu:
dacă chasedByCylons runForYourLife ()
... se compilează până la
dacă (chasedByCylons) runForYourLife ();
Dacă încă mai ești puțin confuz, nu-ți face griji. Sintaxa va începe să aibă mai multă sens când vom cunoaște mai bine limba.
CoffeeScript oferă o serie de aliasuri pentru operatori și cuvinte cheie pentru a face codul mai ușor de citit și mai intuitiv. Să aruncăm o privire asupra unora dintre ei acum.
În primul rând, operatorii de comparație:
Accentsconagua
este hărți pentru === isnt compilează la !== == și != compilați la === și !== respectiv [Ca o bună practică]Să le vedem în acțiune rapid.
dacă pantalonul este onFire lookForWater () dacă jocul nu este bun badMouth ();
... care se compilează pentru a ...
dacă (pant === onFire) lookForWater (); dacă (joc! == bun) badMouth ();
Destul de ușor de citit, nu? Acum, asupra modului în care sunt mapați operatorii logici.
și hărți pentru && sau este un alias pentru || nu compilează până la ! Bazându-ne pe codul nostru anterior:
dacă pantalonul este onFire și nu este aDream lookForWater () dacă jocul nu este bun sau haughtyDevs badMouth ();
... care se compilează pentru a ...
dacă (pant === onFire &&! aDream) lookForWater (); dacă (joc! == bun || haughtyDevs) badMouth ();
Așa cum ați văzut deja mai sus, de bază dacă / altceva construct se comportă la fel ca în JavaScript normal, fără paranteze și bretele curbate. Vom analiza câteva variații de mai jos.
dacă somnul obosit și plictisit () altceva jog () // Raw JS de mai jos dacă (obosit & & plictisit) somn (); altceva jog ();
Iată cum este tratată operatorul ternar:
activitate = dacă duminica este atunciChilling else isWorking // Raw JS sub activitate = duminică? esteChilling: isWorking;
O îmbunătățire semantică suplimentară este cu dacă nu cuvinte cheie. Aceasta funcționează ca exact opusul dacă.
KeepRunning (), cu excepția cazului în care observați oboseala, cu excepția cazului în care focalizarea este extrem de scăzută
Și JavaScript compilat ...
dacă (! obosit) keepRunning (); dacă (concentra! == extremLow) keepWorking;
Comenzile de comutare pot fi puțin obtuzate în JavaScript. CoffeeScript oferă o împachetare intuitivă în jurul acestui construct.
Începe cu intrerupator cuvânt cheie, așa cum era de așteptat, urmată de variabila a cărei valoare verificăm. Fiecare caz sau valoare posibilă este precedată de cand cuvânt cheie urmat de declarațiile de executat dacă este un meci.
Nu este nevoie să adăugați a
pauzădeclarație la sfârșitul fiecărei instrucțiuni de caz: CoffeeScript face acest lucru automat pentru dvs..
timpul de comutare atunci când 6.00 wakeUp () jotDownList () când 9.00 apoi startWorking () când 13.00 atunci mâncați () când 23.00 finishUpWork () altceva doNothing ()
Sintaxa ar trebui să fie destul de explicită dacă deja știți echivalentul în JavaScript. Singurul punct de reținut aici este utilizarea atunci cuvinte cheie. Se utilizează pentru a separa condiția de expresie fără a începe o nouă linie. Puteți utiliza apoi pentru alte declarații condiționale, precum și bucle prea.
Iată JS pe care CoffeeScript generează pentru dvs.:
comutator (timp) caz 6.00: wakeUp (); jotDownList (); pauză; cazul 9.00: startWorking (); pauză; cazul 13.00: mâncați (); pauză; cazul 23.00: finishUpWork (); dormi(); pauză; implicit: doNothing ();
Looping-ul este o altă construcție esențială pentru codul dvs. JavaScript tipic. Fiind prin looping prin numere într-o matrice sau noduri în DOM, aveți întotdeauna nevoie de looping prin colecții.
CoffeeScript oferă o foarte flexibilitate in timp ce care poate fi modificată pentru a funcționa ca generic pentru sau face în timp ce buclă.
în timp ce lucrați> timpul apoi freakOut () în timp> timpul de lucru relaxați () mozyAround () // Raw JS în timp ce (lucrați> timpul) freakOut (); în timp ce (time> work) relax (); mozyAround ();
pana cand este o altă îmbunătățire semantică și este echivalentă cu în timp ce nu. Un exemplu rapid de mai jos:
workOut () până la energie < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Împingerea peste mese este destul de ușoară. Va trebui să utilizați pentru ... in construi să treacă prin matrice. Permiteți-mi să vă arăt cum:
site-uri = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] pentru site-ul site-urilor de alertă
Dacă preferați ca afirmațiile să fie în același rând:
site = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] site-ul de alertă pentru site-ul site-urilor
Editorii de caractere compilează aceste elemente la bază pentru buclele sunt așa. Rețineți că, în conformitate cu cele mai bune practici, lungimea matricei este stocată în memoria cache în prealabil.
site-ul var, site-uri, _i, _len; site-uri = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; pentru (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Iterarea peste matricele asociate [sau hashes sau dictionaries sau perechi cheie-valoare] este la fel de usor cu de cuvinte cheie.
manageri = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' pentru site, manager manager + alertă manager +
Așa cum era de așteptat, cele de mai sus se compilează până la o bază pentru buclă după cum se arată mai jos:
manager de var, manageri, site; managerii = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; pentru (site-ul în manageri) manager = manageri [site]; alertă (manager + "gestionează" + site);
Crearea și utilizarea funcțiilor este extrem de ușoară în cadrul CoffeeScript. Pentru a defini o funcție, listați parametrii de care este nevoie și apoi continuați cu corpul funcției. Aici, permiteți-mi să vă arăt cum:
joacă = (consola, joc = "Mass Effect") -> alertă "Jocul # game pe consola mea #". " jocul "Xbox 360", "New Vegas"
Aceasta este sintaxa de bază din spatele creării și utilizării funcțiilor. Valoarea implicită pentru parametri poate fi definită în linie. CoffeeScript generează codul pentru a verifica dacă o valoare a fost trecută sau nu.
Invocarea unei funcții este la fel de ușoară. Nu este nevoie de paranteze: treceți parametrii unul după altul.
Ca întotdeauna, iată codul generat pentru referință:
var joc; joc = funcție (consola, joc) if (joc == null) game = "Mass Effect"; alertă de întoarcere ("Play" + joc + "pe" + consolă + ""); ; ("Xbox 360", "New Vegas"); Uneori, este posibil să nu aveți altă posibilitate decât să utilizați JavaScript în interiorul codului dvs. CoffeeScript. Sperăm că aceste situații ar trebui să fie foarte mici, dar acest lucru a fost luat în considerare, de asemenea.
Puteți injecta JS brut în codul dvs. prin împachetarea cu accente grave, de asemenea cunoscut sub numele de backquote sau backtick. Orice a trecut astfel va fi complet intact de compilatorul CoffeeScript.
rawJS = 'funcția () return someSuperComplexThingie; '// care vă plasează pe var rawJS; rawJS = funcția () return someSuperComplexThingie; ;
Nimic nu se întâmplă cu ei, ei pot rămâne exact unde sunt. CoffeeScript funcționează perfect cu orice bibliotecă terță parte, mare sau mică, deoarece se compilează la JavaScript brut. Va trebui doar să reformați și / sau refactor codul dvs. foarte ușor, dar în afara de faptul că, incompatibilitățile nu ar trebui să fie un motiv de îngrijorare.
Deci, în loc de a scrie acest lucru:
$ (document) .ready (functie () elemCollection = $ ('colectie'); pentru (i = 0; i<=elemCollection.length;i++) item = elemCollection[i]; // check for some random property here. I am skipping the check here colortoAdd = item.hasProperty()? yesColor : noColor; // I'm quite aware there are better ways to do this $(item).css ('background-color', colortoAdd); ); ... ai scrie ...
$ (document) .ready -> elemCollection = $ ('colecția') pentru elemCollection colortoAdd = dacă item.hasProperty () daColor altceva noColor $ (item) .css 'background-color', colortoAdd Și am ajuns la capăt. Nu am abordat o serie de subiecte de nivel superior, clase de exemplu, deoarece acestea depășesc cu mult domeniul de aplicare al unui articol introductiv. Căutați câteva tutoriale avansate de CoffeeScript pe drum!
Cred că CoffeeScript a schimbat modul în care scriu JavaScript și, după ce am citit acest lucru, sper că s-a schimbat și dumneavoastră. Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită și vă mulțumesc foarte mult pentru citire!
