Share
Es gibt keine zwei Wege: Die Webentwicklungsbranche kann unglaublich hart sein. Dies erfordert, dass wir uns während unserer gesamten Karriere kontinuierlich weiterbilden. Nehmen Sie sich ein paar Jahre frei, und plötzlich werden Sie von neuen Frameworks, Tools, Best Practices und Präprozessoren begraben. Das ist richtig, Kiddies, wenn Sie ein Webentwickler sein wollen, sollten Sie mit der Vorstellung einverstanden sein, dass Ihre Schulung niemals endet (und Sie sollten es auch nicht wollen).
CoffeeScript.org sollte natürlich Ihre erste Anlaufstelle sein, wenn Sie CoffeeScript lernen. Die Dokumentation ist fantastisch. Sobald wir uns eingestehen, dass ein bestimmter Prozentsatz jeder Woche damit verbracht werden sollte, unsere Fähigkeiten zu optimieren und neue Dinge zu lernen, müssen wir feststellen, worauf es ankommt, um unsere Zeit zu investieren, und das ist unglaublich wichtig. Scheinbar jeden Tag werden neue Bibliotheken oder Tools für die Öffentlichkeit freigegeben. Dies bedeutet jedoch nicht, dass wir dem Wind Vorsicht und Zeit schenken und sie alle umarmen sollten. überhaupt nicht. Sicherlich neugierig bleiben, aber eine gesunde Skepsis ist von größter Bedeutung.
Zwangsläufig springen bestimmte Werkzeuge schnell an die Spitze der Liste der „neuen und glänzenden“.
Diese Typen haben das Potenzial, die Art und Weise, wie wir das Web aufbauen, neu zu definieren. jQuery hat die Art und Weise neu definiert, in der wir das DOM abfragen und mit ihm arbeiten. Backbone.js hilft Entwicklern, ihren Spaghetti-Code in gut strukturierte und wartbare Module umzuwandeln. Und vielleicht wird CoffeeScript die Art, wie wir unser JavaScript schreiben, neu erfinden.
Es gibt nur ein Problem: CoffeeScript fügt der JavaScript-Sprache nichts Neues hinzu. Es bietet lediglich eine verbesserte (viele würden sagen, drastisch verbesserte) Syntax, die letztendlich in normales JavaScript kompiliert wird. Unser Dilemma lautet also: In einer Umgebung, in der wir bereits unzählige Sprachen, Techniken und Muster lernen müssen, ist es wirklich die Zeit wert, einen weiteren Präprozessor zu lernen? Nun, während die Antwort auf diese Frage durchaus debattiert werden kann, sollten Sie nach Ansicht dieses Verfassers unbedingt nachdenken!
Es ist möglich, dass Sie zum ersten Mal von CoffeeScript gehört haben. Wenn ja, ärgern Sie sich nicht; erst jetzt fängt es an, in der gesamten entwicklungsgemeinschaft wirklich an Schwung zu gewinnen.
Im Kern verwandelt CoffeeScript, das von Jeremy Ashkenas erstellt wurde, das, was einige als "hässliches JavaScript" bezeichnen, in sauberen und prägnanten Code. Die Funktionalität der JavaScript-Sprache wird nicht erweitert. es schichtet lediglich eine schönere Syntax.
Der beste Weg, um zu demonstrieren, was CoffeeScript bietet, ist ein Spaziergang durch die Syntax.
Die Registerkarte "Try CoffeeScript" von CoffeeScript.org bietet eine Echtzeit-Kompilierung. Es ist eine hervorragende Möglichkeit, mit der Syntax zu spielen.) Wenn Sie einfach nur mit der Syntax spielen möchten, besuchen Sie CoffeeScript.org und klicken Sie auf die Registerkarte "Try CoffeeScript". Wenn Sie CoffeeScript jedoch lokal installieren möchten, vergewissern Sie sich, dass auf Ihrem System aktuelle Kopien von Node.js und npm (Node Package Manager) installiert sind. Mach dir keine Sorgen; es ist einfach.
Als Nächstes kann CoffeeScript von der Befehlszeile aus installiert werden:
npm install -g coffee-script
Das ist es! Du bist bereit zu gehen. Zu sehen eine Datei, script.coffee, und kompilieren es zu script.js Navigieren Sie bei jedem Speichern der Datei in der Befehlszeile zu Ihrem Projektstamm und geben Sie Folgendes ein:
Kaffee - Uhr - kompilieren Skript. Kaffee
Darüber hinaus bieten viele Editoren, wie z. B. TextMate und Sublime Text 2, Bundles an, die diesen Erstellungsprozess in einen einfachen Schlüsselstrich umwandeln. Als Alternative können Sie sich auf Apps wie LiveReload und CodeKit beziehen, die die Task "Watch and Compile" automatisch für Sie erledigen.
LiveReload automatisiert das Anzeigen und Kompilieren von CoffeeScript-Dateien.) Betrachten Sie den folgenden Code-Ausschnitt:
var foo = 'bar'; var bar = 'baz';
In CoffeeScript, var sollte niemals verwendet werden; Tatsächlich gibt die Engine einen Fehler aus, wenn Sie dies versuchen. Stattdessen werden alle Variablen automatisch im aktuellen Gültigkeitsbereich deklariert. Dies bedeutet, dass wir uns keine Sorgen mehr machen müssen, versehentlich versehentlich globale Variablen zu erstellen.
Der obige Code kann wie folgt umgeschrieben werden:
foo = 'bar' bar = 'baz'
Wenn der Code letztendlich zu regulärem JavaScript kompiliert wird, werden beide Variablennamen oben im Funktionsbereich deklariert und dann entsprechend zugewiesen:
var bar, foo; foo = 'bar'; bar = 'baz';
Viele JavaScript-Entwickler hassen die Tatsache, dass alle Ausdrücke mit einem Semikolon enden sollten.
var foo = 'bar';
Technisch gesehen werden Sie feststellen, dass Sie häufig Semikolons weglassen können. Trotzdem gibt es bei diesem Ansatz einige Probleme, und es wurde als bewährte Methode erachtet, sie immer für maximale Sicherheit einzubeziehen.
In CoffeeScript können wir ihnen jedoch für immer zum Abschied zuwinken. Daher kann das vorherige Code-Snippet folgendermaßen geändert werden:
foo = 'bar'
Weitere Hinweise aus Sprachen wie Ruby, in CoffeeScript und Klammern können oft auch weggelassen werden. Dies transformiert traditionelles JavaScript wie:
if (Rate === 10) Ergebnis = 'richtig';
in:
wenn erraten == 10 ergebnis = 'richtig'
Besser noch, wir können mit einem Anweisungsmodifizierer präziser vorgehen:
ergebnis = 'richtig' wenn erraten == 10
Viel sauberer und lesbarer, oder? "Einstellen Ergebnis zu "korrigieren", wenn die vermuten Variable ist gleich 10. “Ausgezeichnet!
Bitte beachten Sie, dass CoffeeScript alle kompiliert
==in die strikte Gleichheitsversion,===, wie von Werkzeugen wie JS Lint empfohlen.
Sie werden schnell feststellen, dass in CoffeeScript derselbe Codeblock auf verschiedene Weise neu geschrieben werden kann. Obwohl Sie die Möglichkeit haben, diese zu ignorieren, lassen sich mit Aliasnamen besser lesbare Vergleiche anstellen. Die folgenden Gruppierungen sind in Funktionalität und Zusammenstellung identisch.
// equality launch == 'go' start ist 'go' // ungleichheit launch! = 'go' start isnt 'go' // nicht false zurückgeben, wenn goForFlight false zurückgibt, wenn nicht goForFlight false zurückgibt, es sei denn, goForFlight // true gibt true zurück return bei return ja // false return false return off return nein // und goForFlight && launch () goForFlight und launch () // oder goForFlight || vorbereiten () goForFlight oder vorbereiten ()
Funktionen sind ein Schlüsselbereich, in dem sich die Syntax erheblich von JavaScript unterscheidet. Eine traditionelle Funktion, die bestimmt, ob es Zahltag - oder Freitag - ist, könnte folgendermaßen aussehen:
var payDay = function () neues Datum zurückgeben (). getDay () === 5; // ist es freitag?
In einem Versuch, die Unordnung mit CoffeeScript zu beseitigen, kann diese Funktion wie folgt umgeschrieben werden:
payDay = -> neues Datum (). getDay () == 5
Alternativ können wir den gesamten Code in einer Zeile platzieren.
payDay = -> neues Datum (). getDay () == 5
Es gibt zwei wichtige Dinge, die es zu beachten gilt:
Accentsconagua
Funktion() wurde durch ersetzt ->.Rückkehr Das Schlüsselwort kann in diesem Fall entfernt werden.Alle zutreffenden Argumente sollten vor dem Zeichen in Klammern stehen ->. Vielleicht ist Zahltag am Donnerstag; In diesem Fall kann die Funktion geändert werden, um flexibler zu sein.
payDay = (Tag) -> neues Datum (). getDay () == Tag
Aber was ist, wenn wir einen Standard-Zahltag für Freitag (oder 5) zuweisen möchten? In normalem JavaScript würden wir wahrscheinlich Folgendes tun:
var payDay = Funktion (Tag) Tag || (Tag = 5); Neues Datum () zurückgeben. getDay () === Tag;
Mit CoffeeScript hingegen können wir dies stark verkürzen.
payDay = (Tag = 5) -> neues Datum (). getDay () == Tag
Flott!
Ein typisches JavaScript-Objekt kann in CoffeeScript erheblich bereinigt werden. Folgendes berücksichtigen:
var Person = Beine: 2, Hände: 2, Finger: 10
Mit CoffeeScript können wir das entfernen var Schlüsselwort sowie die geschweiften Klammern und Kommas. In einer Zeile sind jedoch weiterhin Kommas erforderlich.
Person = Beine: 2, Hände: 2, Finger: 10
Wenn wir jedoch jede Eigenschaft in einer eigenen Zeile platzieren, können sie weggelassen werden. Gleiches gilt für Arrays.
Person = Beine: 2 Hände: 2 Finger: 10
Wichtig: Da CoffeeScript von dem Leerzeichen abhängig ist, kann selbst eine einzige falsch eingerückte Zeile die Art und Weise, wie der Code in JavaScript kompiliert wird, drastisch ändern.
Durch das Verständnis können wir zehn Codezeilen einfach in nur wenige Zeilen umwandeln. Dies ist im Wesentlichen eine Möglichkeit, Ausdrücke zu erstellen, um einen bereitgestellten Satz von Elementen in einem Array oder Objekt zu durchlaufen.
Zum Beispiel, anstatt das typische zu verwenden zum Anweisung - und das "Caching", das mit dem Durchlaufen eines Arrays einhergeht, können wir stattdessen verwenden für in.
Stellen wir uns vor, dass wir eine Reihe von Zeichen durchlaufen müssen. Mit traditionellem JavaScript könnten wir Folgendes tun:
var Zeichen = ['Marty', 'Doc', 'Biff']; für (var i = 0, len = Zeichen.Länge; i < len; i++ ) console.log("Get %s to the time machine", characters[i]); Es ist sicherlich nicht hübsch; Wenn wir stattdessen CoffeeScript verwenden, kann es schön sein.
characters = ['Marty', 'Doc', 'Biff'] für Person in Characters console.log "Hol% s zur Zeitmaschine", person
Fühlt sich das nicht gut an zu schreiben? Sicher kann ich nicht der einzige sein!
Wie Sie in Kürze feststellen werden, können wir sogar die String-Interpolation verwenden, um den Code weiter zu verbessern.
Es gibt jedoch ein Problem: Wir haben Biff unbeabsichtigt zur Zeitmaschine geleitet, was keine gute Idee ist. Ändern Sie den Code, um anzugeben, dass die Zeichenfolge nur unter der Bedingung in der Konsole protokolliert werden soll, dass die aktuelle Person im Array dies nicht ist Biff. In CoffeeScript ist das ein Kinderspiel, wenn wir Filter nutzen.
characters = ['Marty', 'Doc', 'Biff'] für Person in Charakteren, wenn sich nicht 'Biff' console.log befindet "Holen Sie% s zur Zeitmaschine", person
Ja; Das Mittel erforderte insgesamt vier von Menschen lesbare Wörter.
Wenn wir es wünschen, können wir diese Schleifen jetzt lesbarer machen, indem wir das Listenverständnis verwenden. Durchlaufen Zeichen Array und protokollieren Sie den Namen jeder Person in der Konsole:
console.log Person für Person in Zeichen
Oder als anderes Beispiel, um alle Ankertags von der Seite abzurufen (mithilfe von jQuery) Karte Methode), speichern Sie jeden Anker href Wert innerhalb eines Arrays und durchlaufen Sie schließlich dieses Array und protokollieren Sie die Werte mit normalem JavaScript in der Konsole.
var links = $ ('a'). map (function () return this.href;); console.log (links.join (',')); Mit CoffeeScript haben wir jedoch bessere Möglichkeiten:
console.log (Link für den Link in $ ('a'). map -> @href) .join ',' Als letztes Beispiel, was wäre, wenn wir eine Reihe von Personenobjekten hätten:
Personen = [Name: 'Jeffrey' Alter: 27, Name: 'John' Alter: 13, Name: 'Jan' Alter: 42]
Unsere Aufgabe ist es, ein neues Array zu erstellen ofAge, und machen Sie es gleich einer Liste nur der Objekte, deren Alter 21 Jahre oder älter ist. Mit normalem Vanilla-JavaScript könnten wir auch Folgendes tun:
var ofAge = []; für (var i = 0, len = people.length; i < len; i++ ) if ( people[i].age >= 21) ofAge.push (Personen [i]);
Ja, es ist ziemlich wortreich für eine so einfache Aufgabe. Lassen Sie uns das mit CoffeeScript auf eine einzige Zeile reduzieren, indem Sie Verständnis nutzen.
ofAge = (p für p in Personen, wenn p.age> = 21)
Bam! Indem wir alles einschließen, was nach dem Gleichheitszeichen in Klammern steht, geben wir an, dass das ofAge Die Variable sollte den Ergebnissen dieser Operation entsprechen, bei der es sich um ein Array handelt. Das Array wird also erstellt und dann zugewiesen ofAge. Wenn Sie verwirrt sind, lesen Sie einfach den Ausdruck von links nach rechts. „Schieben Sie den Personengegenstand auf Ergebnisse Array für jeden Person in dem Menschen Array… so lang wie die Person Alter Eigenschaft ist größer oder gleich 21. ” wann Keyword wird als Filter bezeichnet und kann unglaublich leistungsfähig sein. Gib es zu: Du fängst an zu schwelgen.
Im vorherigen Abschnitt haben wir eine recht typische Methode verwendet, um eine Variable an einen String zu binden.
console.log "Holen Sie sich% person zur Zeitmaschine", person
Ähnlich wie Sprachen wie Ruby bietet CoffeeScript über die Zeichenfolge Interpolation von Strings an # Syntax. Dieser Code kann wie folgt umgeschrieben werden:
console.log "Bring # person zur Zeitmaschine"
Beachten Sie, dass Sie, wie bei den meisten Sprachen, die String-Interpolation nutzen müssen, statt Anführungszeichen doppelte Anführungszeichen verwenden müssen.
Betrachten Sie die übliche Aufgabe, einen Verweis zwischenzuspeichern diese, Wenn sich also der Kontext ändert, beispielsweise innerhalb des Rückrufs einer jQuery-Ereignisbindung, können wir weiterhin auf den zwischengespeicherten Speicherort zugreifen. Hier ist ein Beispiel:
var self = dies; $ ('h1'). on ('click', function () // 'this' bezieht sich jetzt auf den Anker, auf den geklickt wurde, // verwendet stattdessen self. self.someMethod ();); CoffeeScript liefert den "fetten Pfeil" oder =>, das kann eine enorme Hilfe sein. Wenn wir uns ändern -> zu =>, Hinter den Kulissen speichert CoffeeScript einen Verweis auf diese. Dann werden innerhalb der Funktion alle Verweise auf diese wird dynamisch durch die zwischengespeicherte Version ersetzt.
Um diese Idee zu veranschaulichen, den folgenden Code:
$ ('h1'). auf 'click', => this.someMethod () … Wird kompilieren zu:
var _this = das; $ ('h1'). on ('click', function () return _this.someMethod ();); CoffeeScript bietet eine hilfreiche Klasse Syntax für diejenigen, die einen klassischeren Ansatz zur Strukturierung ihres Codes bevorzugen. Zum Beispiel durch einfaches Tippen Klasse Person, CoffeeScript kompiliert diesen Code wie folgt:
var Person; Person = (Funktion () Funktion Person () Rückgabe Person;) ();
Beachten Sie, wie die Person Variable ist gleich einem selbstaufrufenden Funktionsausdruck, der den inneren zurückgibt Person Funktion. Müssen wir sofort nach der Instantiierung ein wenig Code ausführen, ähnlich wie PHP __konstruieren Methode können wir unsere platzieren drin Code innerhalb der Konstrukteur Methode der Klasse, wie so:
Klasse Personenkonstruktor: (Name, Alter) -> this.name = name this.age = age
Das Konstrukteur Methode kann nicht explizit aufgerufen werden; Stattdessen wird es dynamisch ausgelöst, wenn Sie die Klasse instanziieren. Dieser Code kann jedoch verbessert werden. CoffeeScript bietet zusätzlichen Zucker, der ihn verkürzen kann. In CoffeeScript die @ Symbol bezieht sich immer auf diese, oder die Instanz von Person. Als solche eher als dieses Alter, wir können stattdessen verwenden @Alter, mit denen Ruby-Entwickler vertraut sein werden. Der obige Code kann wie folgt umgeschrieben werden:
Klasse Personenkonstruktor: (Name, Alter) -> @name = name @age = age
Besser noch, wir können noch einen Schritt weiter gehen. Diese Instanzvariablen können auf andere Weise festgelegt werden:
Klasse Personenkonstruktor: (@name, @age) ->
Nicht schlecht, oder? An diesem Punkt zu erweitern PersonAls Prototyp mit zusätzlichen Methoden erstellen wir einfach neue Methoden auf dieselbe Weise, wie wir einem Objekt Methoden hinzufügen würden. Hinter den Kulissen wird CoffeeScript die Methode an den Prototyp anhängen. Fügen wir eine Methode hinzu, die das Geburtsjahr der Person bestimmt.
Klasse Personenkonstruktor: (@name, @age) -> getBirthYear: -> neues Datum (). getFullYear () - @age
Dieser schöne, saubere Code wird, sobald er in JavaScript kompiliert wurde, Folgendes sein:
var Person; Person = (Funktion () Funktion Person (Name, Alter) this.name = name; this.age = age; Person.prototype.getBirthYear = function () return new Date (). GetFullYear () - das. Alter;; Rückgabe Person;) ();
Wir haben also die Anzahl der Zeilen von sechzehn auf vier reduziert. Um diese neue Klasse zu instanziieren, können wir schreiben:
man = new Person ('Jeffrey', 27) man.getBirthYear () # 1985 Noch besser, um Kinderklassen anzulegen, die sich erweitern Person, wir brauchen nur die erweitern Stichwort:
Klasse Kind erweitert Person
An diesem Punkt, Kind hat jetzt Zugriff auf alle Eigenschaften und Methoden aus der Person Klasse und kann sie nach Belieben referenzieren oder überschreiben.
Trotz dieses herrlichen Zuckers bleibt uns immer noch die Frage: Sollen wir CoffeeScript in der Produktion verwenden? Nun, John Q. Reader, das liegt ganz bei Ihnen. Es gibt stichhaltige Argumente dafür und dagegen. Die Neinsager werden darauf hinweisen, dass das Debuggen möglicherweise schwieriger wird, da Sie nicht speziell mit dem kompilierten JavaScript arbeiten. Sie debuggen Code, den Sie nicht geschrieben haben. Das kann ein Kampf sein.
„Ich denke, CoffeeScript ist ein brillantes Experiment. CoffeeScript übernimmt die guten Teile und fügt eine minimale Syntax hinzu, was reizend ist. Ich empfehle es nicht, es in der Produktion zu verwenden, da es mit seiner eigenen Problemwelt einhergeht. - Douglas Crockford ”
Man könnte auch argumentieren, dass eine zu starke Abhängigkeit von Abstraktionen wie dieser dazu führen kann, dass der Entwickler JavaScript insgesamt weniger versteht. Da so viele Best Practices in den Compiler eingebettet werden, ist es für den Entwickler einfacher, diese Best Practices auswendig zu lernen, wie das Vermeiden von Globals und das Heben von Variablen. Ob diese Art der Automatisierung eine gute Sache ist oder nicht, steht zur Debatte.
"Eine bewährte Methode, die von einem Compiler erzwungen und generiert werden kann, ist besser als eine bewährte Methode, die jedes Mal beachtet und manuell eingegeben werden muss." - Jeremy Ashkenas
Um den Anwalt des Teufels zu spielen, hätte man das auch für jQuery sagen können. Ermutigt jQuery zu einer neuen Generation von Entwicklern, die nie wirklich Vanille-JavaScript lernen? Absolut nicht; Wenn überhaupt, hat es wesentlich zum Wiederaufleben der JavaScript-Sprache beigetragen.
Die CoffeeScript-Syntax mag anfangs vertrauter und einladender für Ruby- und Python-Entwickler sein, die sich vor JavaScript fürchten, hoffentlich ermutigt sie sie jedoch, tiefer in die zugrunde liegende Sprache zu graben.
Um mehr über CoffeeScript-Meinungen von JavaScript-Meistern auf beiden Seiten des Zauns zu erfahren, lesen Sie den Abschnitt „Sollten Sie CoffeeScript lernen“ von Nettuts +. ) Letztendlich ist CoffeeScript nur JavaScript. Es bietet eine schöne Syntax, die über der Sprache liegt. Die Profis liegen auf der Hand: Der Code folgt automatisch den Best Practices und wird kürzer, weniger fehleranfällig und deutlich lesbarer. Andererseits ist das Debuggen ein Problem, das im Workflow eines Entwicklers viel Zeit in Anspruch nehmen kann.
Die Wahl liegt bei Ihnen! Ich kann mir nicht vorstellen, zurück zu gehen. Ich bin ganz in CoffeeScript.
