Við skulum líta á það, JavaScript hefur ekki alltaf haft gott orðspor meðal forritara, og frá stofnun CoffeeScript aftur árið 2009 hefur þetta litla tungumál tekið heim JavaScript forritara með stormi; aðallega vegna þess að það sigrar það sem sumir kunna að segja er versta þátturinn í JavaScript: setningafræði kóðans.
Jafnvel þótt þetta sé nýtt tungumál þá mun þú taka það upp mjög fljótlega aðallega vegna þess að það er endurbætt JavaScript; það er í raun fallegri, einfaldari JavaScript.
Þegar þú skrifar CoffeeScript, ekki gleyma að þú skrifir kóða sem áður en þú ert að senda inn er að fara saman í JavaScript sem fylgir bestu starfsvenjum og framhjá JSLint prófinu, svo það er ein lítill hlutur sem þú þarft að hafa áhyggjur af. Framleiðslan mun enn vera gilt JavaScript að vafrinn hafi ekki vandamál í lestri. CoffeeScript er að JavaScript sem SASS er CSS: leið til að skrifa einfaldari og afkastamikill kóða.
CoffeeScript er notendaviðmót node.js svo að hægt sé að setja það upp þarftu að hafa node.js uppsett svo og hnút pakka framkvæmdastjóri. Miðað við að þú hafir sett þessar tvær pakkar allt sem þú þarft að gera er að fara í flugstöðina þína og setja CoffeeScript með pakka framkvæmdastjóra með því að nota kóðann:
npm install -g coffee-scriptBara með það hefur þú CoffeeScript uppsett á vélinni þinni. Til þess að setja saman .coffee skrá inn í JavaScript skrá þarftu að slá inn:
coffee --compile script.coffeeÞetta mun setja saman skrá script.coffee inn í script.js í sömu möppu en mun aðeins gera það þegar þú keyrir stjórnina ef þú vilt að það sé tekið saman í öllum breytingum sem þú gerir í kaffiblaðinu þarftu að bæta við -horfinu áður að safna saman:
coffee --watch --compile script.coffeeMeð því að bæta við þínum JavaScript verður safnað saman í hvert skipti sem þú gerir breytingu á .coffee skránum þínum.
Þegar þú skrifar JavaScript breytu verðum við að forskeyta var leitarorðið, með CoffeeScript þessi leitarorð er farin og þú getur bara skrifað út breytu og tengt það við eitthvað. Annar hlutur að líta út fyrir er að CoffeeScript notar margar innspýtingaraðferðir til að forðast hálfkúlur og tungumálið að skilja að breytuyfirlitið er lokið, þú þarft bara að flytja á nýjan línu:
age = 21country = "Portugal"Í JavaScript þú verður að slá eitthvað eins og:
var age = 21;var country = "Portugal";Það er lítið dæmi en þú getur byrjað að sjá hversu öflugur CoffeeScript er þegar kemur að því að einfalda kóðann þinn.
Mundu að allan þann tíma sem þú eyddi að minnka JavaScript-rekstraraðila? Mundu að furða hvers vegna þú þurfti að nota === í stað þess að nota bara er? Jæja CoffeeScript sér einnig um það. Það býður upp á nokkrar frábærar alíasar fyrir rekstraraðila:
Annað sem CoffeeScript losnar við er hrokkið braces. Það notar innstreymisaðferðina til að lýsa yfir þegar þú ert inni í yfirlýsingu, ef yfirlýsingar virka eins og JavaScript en þú þarft ekki krullykkja eða sviga; Sláðu bara inn kóðann sem þú vilt keyra þegar yfirlýsingin er satt:
if work > 24 and sleep < 8vacations()elsework()mun safna saman í JavaScript sem:
if (work > 24 && sleep < 8) {vacations();} else {work();}Ég vona að þú sért að byrja að sjá ávinninginn af CoffeeScript bara með þessum einföldu sýnikennslu um hvernig hreint það getur gert kóðann þinn og hreinni kóða þýðir meira viðráðanlegt kóða.
Looping gegnum fylki er ein af þeim hlutum sem þú þarft að gera í öllum JavaScript forritum sem þú skrifar og setningafræði fyrir lykkjur í gegnum þau í JavaScript er ekki einfaldasta eða hreinasta, ég held að þetta sé þar sem CoffeeScript skín í raun. Til að lykkja í gegnum fylki notum við for..in lykkju eins og svo:
tasks = ['Design','Code','Groceries']for task in tasksalert taskAllt þetta stykki af kóða mun gera er að lesa alla hluti í fylkinu og þá viðvörun þá eitt í einu, bara til að gera hlutina enn einfaldara er hægt að jafnvel skrifa fyrir ... í lykkju í einni línu, eins og svo:
tasks = ['Design','Code','Groceries']alert task for task in tasksÞað er einfaldlega miklu meira læsileg og viðráðanleg en vanillan JavaScript, þar sem talað er um hvaða kóða framleiddur af CoffeeScript fyrir þessar tvær línur væri:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}Þó að lykkjur séu líka mjög gagnlegar þegar þú býrð til JavaScript forritið þitt og CoffeeScript tekst það ekki auðveldara að lesa og skrifa líka, til dæmis:
while sleep < 8sleep()Eða þú getur skrifað allt á einum lína ef þú vilt:
while sleep < 8 then sleep()Eða:
sleep() until sleep > 8Í hreinu JavaScript myndi þetta þýða til:
//thenwhile (sleep < 8) {sleep();}Eða:
//untilwhile (!(sleep > 8)) {sleep();}Aðgerðir eru einnig annar mikilvægur þáttur í hvaða forritunarmál sem er og jafnvel þó að aðgerðir í JavaScript séu ekki sóðalegir eins og aðrir hlutar. CoffeeScript einfaldar þetta líka í hámarki, einföld aðgerð sem tekur nafn einhvers og þá varir það að það sé skrifað svona :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Allt sem þú gerir er nafnið fallið, í þessu tilfelli er aðgerðin kallað sayHi, og síðan eftir jafnt táknið þarftu að tilgreina breytur. Hér heitir einn breytu, eftir að grunnur virkni okkar er skilgreindur, þurfum við að slá inn -> fylgt á næstu línu með því sem við viljum að aðgerðin virki þannig að CoffeeScript veit að við erum inni í aðgerðinni. Í þessu tilfelli er allt sem ég vil gera er að fara aftur "Halló" og þá heiti viðkomandi og að lokum nota ég einfalt viðvörun til að hringja í aðgerðina með nafni. Við getum líka skrifað þetta í einum línu sem útilokar innslátt og innstreymi bara með því að skrifa hvað aðgerðin mun gera eftir ->:
sayHi = (name) -> return "Hello " + nameÞessi litla kóði kóða verður tekin saman í eftirfarandi JavaScript:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Auðvitað var þetta mjög einfalt virka en eins og þú sérð er það vistað okkur 3 línur af kóða og auðvitað í JavaScript gætum við bara nefnt breytu eins og við lýsum hlutanum eins og svo:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Dæmiin sem ég hef gefið hér eru það sem CoffeeScript samanstendur af og jafnvel þótt í flestum tilfellum séu auðveldari leiðir til að slá eitthvað út þá er öll JavaScript samanlagt gilt og merkingartækni.
Þetta er bara upphafið af því sem CoffeeScript getur gefið þér, þegar hlutirnir byrja að verða flóknari mun þetta litla tungumál gefa þér mikla skiptimynt í samanburði við JavaScript, minna kóða sem þú þarft að skrifa, fleiri læsilegan kóða og meira viðhald , svo að þú getur komið aftur á vefsíðu á ári síðar og veit hvað er að gerast í JavaScript.
Haltu áfram í seinni hluta þessa röð þar sem ég mun sýna þér hvernig á að sameina CoffeeScript með jQuery og LocalStorage til að búa til einfaldan tengiliðalista app.
Hefur þú notað CoffeeScript til að einfalda JavaScript? Hvaða hlutar af CoffeeScript kýsu að Javascript? Láttu okkur vita í athugasemdunum.