Share
Hoewel CoffeeScript een nieuwe taal is, zul je het snel leren. Dat zou je moeten doen, want het is tenslotte slechts pronken met JavaScript met flitsende kleding. Het leest als Ruby of Python, maar compileert tot pure, niet-pluizige JavaScript. Vandaag gaan we bekijken waarom iedereen het over CoffeeScript heeft.
Met de komst van krachtige JavaScript-engines, zoals V8, heeft JavaScript zijn stigma van een geïmprimeerd hulpmiddel voor jeugdinteracties afgeworpen en veranderd in een behoorlijk krachtpatser. Het is zelfs gesprongen van client-side applicaties naar server side, node.js bijvoorbeeld. Het feit dat het vasthoudt aan een behoorlijk handige, prototype-gebaseerde ideologie, doet ook geen pijn. Het lijdt geen twijfel dat JavaScript inderdaad een kritische taal is, nu en in de nabije toekomst.
Maar ik vond de syntaxis zelf altijd een beetje kludgy. Na het werken met een mix van Ruby en Python in de afgelopen paar jaar, heb ik het vinden van JavaScript's semi-colon infuus, haakjesafhankelijke, uitgebreide syntaxis vervelend gevonden. En van wat ik kan verzamelen, ben ik niet de enige die zich zo voelt. Dit is waar CoffeeScript te hulp schiet!
CoffeeScript compileert naar raw JS.
CoffeeScript is in essentie slechts een syntactische herschrijving van JavaScript. De kerntaal zelf blijft hetzelfde, met kleine semantische verbeteringen. De syntaxis is gewijzigd, gemodelleerd naar Python en Ruby.
Vergeet niet dat de CoffeeScript-compiler schone JavaScript-code uitvoert die niet alleen de beste werkwijzen volgt en uitstekend leesbaar is, maar ook JSLint passeert. Dit betekent dat u zich geen zorgen hoeft te maken over compatibiliteit langs de lijn. In het slechtste geval dat dit project doodgaat, kun je gewoon de ongerepte JS oppakken die door CoffeeScript wordt gegenereerd en verder gaan met je code. Je bent niet opgesloten in deze omgeving.
Dit lijkt misschien een buitenaards concept maar onder de paraplu voor webontwikkeling hebben we al een redelijk deel van deze ideologie gezien. HAML is maar een nieuwe manier om HTML te schrijven, terwijl SASS hetzelfde doet voor CSS. Ze zuiveren allemaal de structuur en de syntaxis van hun talen, waardoor ze gemakkelijker om mee te werken zijn en zo onze productiviteit verhogen.
Je vraagt je waarschijnlijk af hoe de code eruitziet, dus hier is een snelle blik:
index = (lijst, doel) -> [laag, hoog] = [0, lijst.lengte] tijdens laag < high mid = (low + high) >> 1 val = lijst [midden] return mid if val is target if val < target then low = mid + 1 else high = mid return -1
Dit is een snelle implementatie van een binaire zoekopdracht. Probeer de code zelf nu niet te ontleden. Probeer gewoon vertrouwd te raken met de syntaxis.
Hieronder staat de JavaScript-code die CoffeeScript genereert:
var index; index = functie (lijst, doel) var high, low, mid, val, _ref; _ref = [0, list.length], low = _ref [0], high = _ref [1]; terwijl (laag < high) mid = (low + high) >> 1; val = lijst [midden]; if (val === target) return mid; als (val < target) low = mid + 1; else high = mid; return -1; ;
Hier zijn enkele snelle voor- en nadelen van het gebruik van CoffeeScript. Dit is op geen enkele manier volledig, maar ik denk dat dit voldoende is om een snel overzicht van het systeem te krijgen.
Er zijn natuurlijk talloze andere punten, waaronder semantische en syntactische verbeteringen.
De officiële methoden om aan de slag te gaan, zijn onder meer een opdrachtregelprogramma dat wordt uitgevoerd onder node.js en waarmee eenvoudigweg de bron wordt gedownload en geïnstalleerd. Er is niet veel te vertellen hier. Download het hulpprogramma node.js en gebruik npm installeer koffie-script [of voor de bron, bin / cake installatie] om te installeren en aan de slag te gaan.
De situatie met Windows is iets gecompliceerder. Er is geen eenvoudige manier om node.js of de bron geïnstalleerd op Windows [buiten Cygwin] te krijgen. Nooit fret echter. Een aantal ondernemende mensen hebben compilers geschreven die native werken op Windows. Ik heb er een paar hieronder opgenomen:
Merk op dat de compiler, in gecompileerde JavaScript-vorm, ook is gebundeld met de bron, als je geïnteresseerd bent. Het is aanwezig onder de extra map met een voor de hand liggende naam.
Met dat uit de weg, gaan we nu kijken naar een handvol dingen die laten zien hoe CoffeeScript JavaScript gemakkelijker te consumeren maakt!
Het eerste dat u moet weten, is hoe CoffeeScript effectief witruimte gebruikt om de syntaxis te vereenvoudigen. Mensen met een Python-achtergrond zullen dit triviaal vinden, maar voor de anderen is hier een korte uitleg.
Allereerst hoeft u niet elke regel te beëindigen met een puntkomma. Het beëindigen van een regel wordt automatisch geïnterpreteerd als het einde van die verklaring. Dit is bijvoorbeeld ...
nummers = [0, 1, 2, 3] name = "NetTuts +"
... compileert dit:
var naam, nummers; nummers = [0, 1, 2, 3]; name = "NetTuts +";
Vervolgens zult u blij zijn te weten dat u krullende accolades kunt wegnemen. Die talrijke beugels voor het openen en sluiten van een blok? Alles is weg. In CoffeeScript gebruik je Python-achtige inspringing om het begin en einde van een blok aan te duiden.
CoffeeScript vereist geen onnodige haakjes of accolades.
Hier is een snel voorbeeld. Negeer nu alles behalve de inspringing. We komen iets later naar de rest:
if chasedByCylons runForYourLife ()
... compileert naar
if (chasedByCylons) runForYourLife ();
Als je nog steeds een beetje in de war bent, maak je geen zorgen. De syntaxis zal logischer worden zodra we de taal beter leren kennen.
CoffeeScript biedt een aantal aliassen voor operators en zoekwoorden om de code leesbaarder en intuïtiever te maken. Laten we een paar van hen nu bekijken.
Ten eerste, de vergelijkingsexploitanten:
Accentsconagua
is kaarten voor === isnt compileert naar !== == en != compileren naar === en !== respectievelijk [als een best practice]Laten we ze snel in actie zien.
als pant onFire lookForWater () is als game niet goed is badMouth ();
... die compileert naar ...
if (pant === onFire) lookForWater (); if (game! == goed) badMouth ();
Best gemakkelijk om te lezen, niet? Nu, op hoe logische operators in kaart worden gebracht.
en kaarten voor && of is een alias voor || niet compileert naar ! Voortbouwen op onze vorige code:
als pant onFire is en niet aDream lookForWater () als game niet goed is of hooghartigDevs badMouth ();
... die compileert naar ...
if (pant === onFire &&! aDream) lookForWater (); if (game! == goed || haughtyDevs) badMouth ();
Zoals je hierboven al hebt gezien, de basis if / else construct gedraagt zich hetzelfde als in normaal JavaScript, zonder de haakjes en accolades. We zullen enkele variaties hieronder bekijken.
als moe en verveeld slapen () anders jog () // Raw JS hieronder als (moe && verveeld) slaap (); else jog ();
En hier is hoe de ternaire operator wordt behandeld:
activiteit = als zondag dan is Chilling else isWorking // Raw JS below activity = sunday? isChilling: isWorking;
Een extra semantische verbetering is met de tenzij trefwoord. Dit functioneert als precies het tegenovergestelde van als.
keepRunning () tenzij moe blijven werken, tenzij de focus extreem laag is
En de gecompileerde JavaScript ...
if (! moe) keepRunning (); if (focus! == extremelyLow) keepWorking;
Switch-instructies kunnen een beetje stompzinnig zijn in JavaScript. CoffeeScript biedt een intuïtieve wrapper rond dit construct.
Het begint met de schakelaar sleutelwoord, zoals verwacht, gevolgd door de variabele waarvan we de waarde controleren. Elk geval of mogelijke waarde wordt voorafgegaan door de wanneer sleutelwoord gevolgd door de uit te voeren uitingen als het een lucifer is.
Het is niet nodig om een toe te voegen
brekenverklaring aan het einde van elke case-statement: CoffeeScript doet dit automatisch voor u.
schakel de tijd in wanneer 6.00 wakeUp () jotDownList () wanneer 9.00 start dan met werken () wanneer 13.00 en dan eet () wanneer 23.00 klaar isUpWork () sleep () else doNothing ()
De syntaxis moet redelijk duidelijk zijn als u het equivalent al kent in JavaScript. Het enige punt om op te merken hier is het gebruik van de dan trefwoord. Het wordt gebruikt om de voorwaarde van de uitdrukking te scheiden zonder een nieuwe regel te starten. Je kunt dan ook voor de andere voorwaardelijke uitspraken gebruiken, evenals lussen.
Dit is de JS die CoffeeScript voor u genereert:
switch (tijd) case 6.00: wakeUp (); jotDownList (); breken; case 9.00: startWorking (); breken; geval 13.00: eten (); breken; case 23.00: finishUpWork (); slaap(); breken; standaard: doNothing ();
Looping is een ander essentieel construct voor uw typische JavaScript-code. Of het nu gaat om het doorlopen van nummers in een array of knooppunten in de DOM, u hebt altijd behoefte aan het doorlopen van collecties.
CoffeeScript biedt een zeer flexibel terwijl lus die kan worden gewijzigd om als generiek te functioneren voor of doen terwijl lus.
while work> time then freakOut () while time> werk relax () mozyAround () // Raw JS while (werk> tijd) freakOut (); while (tijd> werk) relax (); mozyAround ();
tot is een andere semantische verbetering en is equivalent aan hoewel niet. Een snel voorbeeld hieronder:
workOut () tot energie < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Looping over arrays is vrij eenvoudig. U moet de gebruiken voor in construeer om door de array te stappen. Laat me je laten zien hoe:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] voor website in sitewaarschuwingssite
Als u wilt dat de statements in dezelfde regel staan:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] waarschuwingssite voor site op sites
CoffeeScripts compileert deze naar standaard voor Loopt als volgt. Merk op dat in overeenstemming met de aanbevolen procedures de lengte van de array van tevoren in de cache wordt opgeslagen.
var site, sites, _i, _len; sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; voor (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Itereren over associate arrays [of hashes of woordenboeken of sleutel / waarde-paren] is net zo gemakkelijk met de van trefwoord.
managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' voor site, manager van managers alertmanager + 'beheert' + site
Zoals verwacht, compileert het bovenstaande tot een basis voor lus zoals hieronder getoond:
var manager, managers, site; managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; for (site in managers) manager = managers [site]; alert (manager + "beheert" + site);
Het maken en gebruiken van functies is uiterst eenvoudig onder CoffeeScript. Om een functie te definiëren, geeft u de benodigde parameters op en gaat u verder met het lichaam van de functie. Hier laat ik je zien hoe:
spelen = (console, game = "Mass Effect") -> melding "Speel # game op mijn # console." spelen 'Xbox 360', 'New Vegas'
Dit is de basissyntaxis achter het maken en gebruiken van functies. De standaardwaarde voor parameters kan inline worden gedefinieerd. CoffeeScript genereert de code om te controleren of een waarde is doorgegeven of niet.
Het aanroepen van een functie is net zo eenvoudig. Er zijn geen haakjes nodig: de parameters achter elkaar doorgeven.
Zoals altijd is hier de gegenereerde code voor uw referentie:
var spelen; spelen = functie (console, spel) if (game == null) game = "Mass Effect"; return alert ("Playing" + game + "op mijn" + console + "."); ; spelen ('Xbox 360', 'New Vegas'); Soms heb je geen andere keuze dan raw-JavaScript in je CoffeeScript-code te gebruiken. Hopelijk moeten deze instanties ver en weinigen tussen maar dit is ook rekening gehouden.
U kunt onbewerkte JS in uw code injecteren door deze te omwikkelen met ernstige accenten, ook wel bekend als back-to-date of backtick. Alles wat wordt doorgegeven, wordt volledig onberoerd door de CoffeeScript-compiler.
rawJS = 'function () retourneer someSuperComplexThingie; '// welke netten jij ruilt JS; rawJS = function () return someSuperComplexThingie; ;
Er gebeurt niets met hen, ze kunnen precies blijven waar ze zijn. CoffeeScript werkt naadloos samen met elke externe bibliotheek, groot of klein, omdat het eenvoudigweg compileert met onbewerkt JavaScript. Je zult je code gewoon moeten herformatteren en / of refactoren, maar anders dan dat, zouden incompatibiliteiten geen punt van zorg moeten zijn.
Dus in plaats van dit te schrijven:
$ (document) .ready (function () elemCollection = $ ('. collection'); for (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); ); ... je zou schrijven ...
$ (document) .ready -> elemCollection = $ ('. collection') voor item in elemCollection colortoAdd = if item.hasProperty () then yesColor else noColor $ (item) .css 'background-color', colortoAdd En we zijn ten einde. Ik heb een aantal onderwerpen van een hoger niveau behandeld, bijvoorbeeld klassen, omdat ze ver buiten het bereik van een inleidend artikel vallen. Zoek naar een aantal geavanceerde lesprogramma's in CoffeeScript onderweg!
Ik denk dat CoffeeScript de manier waarop ik JavaScript schrijf, heeft veranderd en, na het lezen hiervan, ik hoop dat het ook van jou is veranderd. Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Fijne codering en heel erg bedankt voor het lezen!
