Share
Obwohl CoffeeScript eine neue Sprache ist, werden Sie es sehr schnell lernen. Sie sollten, da es nur JavaScript ist, das mit ein paar auffälligen Klamotten spielt. Es liest sich wie Ruby oder Python, setzt sich aber zu reinem, nicht flockigem JavaScript zusammen. Heute werfen wir einen Blick darauf, warum alle über CoffeeScript sprechen.
Mit dem Aufkommen leistungsfähiger JavaScript-Engines wie V8 hat JavaScript sein Stigma eines gimped-Tools für jugendliche Interaktionen abgebaut und sich in ein Kraftpaket verwandelt. Es ist sogar von clientseitigen Anwendungen auf die serverseitige Seite (node.js) gesprungen. Die Tatsache, dass es sich an eine ziemlich clevere, auf Prototypen basierende Ideologie hält, schadet auch nicht. Es besteht kein Zweifel, dass JavaScript in der Tat und auf absehbare Zeit eine kritische Sprache ist.
Aber ich habe die Syntax immer als etwas kludig empfunden. Nachdem ich in den letzten Jahren mit einer Mischung aus Ruby und Python gearbeitet hatte, habe ich festgestellt, dass JavaScripts Semikolon-infundierte, von Klammern abhängige, ausführliche Syntax langweilig ist. Und von dem, was ich sammeln kann, bin ich nicht alleine damit, auf diese Weise zu fühlen. Hier kommt CoffeeScript zur Rettung!
CoffeeScript kompiliert bis auf das reine JS.
CoffeeScript ist im Wesentlichen nur eine syntaktische Umschreibung von JavaScript. Die Kernsprache selbst bleibt gleich, mit kleinen semantischen Verbesserungen. Die Syntax wird modifiziert und nach Python und Ruby modelliert.
Denken Sie daran, dass der CoffeeScript-Compiler sauberes JavaScript ausgibt, das nicht nur bewährten Methoden folgt und auch hervorragend lesbar ist, sondern auch JSLint durchläuft. Das bedeutet, dass Sie sich um die Kompatibilität keine Sorgen machen müssen. Im schlimmsten Fall, in dem dieses Projekt stirbt, können Sie einfach den von CoffeeScript generierten unverfälschten JS abholen und mit Ihrem Code weitermachen. Sie sind nicht in dieser Umgebung eingeschlossen.
Dies mag wie ein Fremdwort aussehen, aber unter dem Dach der Webentwicklung haben wir bereits einen guten Anteil an dieser Ideologie gesehen. HAML ist nur eine neue Art, HTML zu schreiben, während SASS dasselbe für CSS tut. Alle bereinigen die Struktur und die Syntax ihrer Sprachen, wodurch sie einfacher zu bedienen sind und unsere Produktivität steigt.
Sie fragen sich wahrscheinlich, wie der Code selbst aussieht. Hier ist ein kurzer Blick:
index = (liste, target) -> [low, high] = [0, list.length] bei low < high mid = (low + high) >> 1 val = list [mid] return mid wenn val das Ziel ist wenn val < target then low = mid + 1 else high = mid return -1
Dies ist eine schnelle Implementierung einer binären Suche. Versuchen Sie nicht, den Code selbst jetzt zu analysieren. Versuchen Sie einfach, sich mit der Syntax vertraut zu machen.
Nachfolgend finden Sie den JavaScript-Code, den CoffeeScript generiert:
var index; Index = Funktion (Liste, Ziel) var hoch, niedrig, mittel, val, _ref; _ref = [0, list.length], low = _ref [0], high = _ref [1]; während (niedrig < high) mid = (low + high) >> 1; val = Liste [Mitte]; if (val === target) return mid; if (val < target) low = mid + 1; else high = mid; return -1; ;
Hier sind einige schnelle Vor- und Nachteile der Verwendung von CoffeeScript. Dies ist keinesfalls umfassend, aber ich denke, das reicht aus, um einen schnellen Überblick über das System zu erhalten.
Natürlich gibt es zahlreiche andere Punkte, einschließlich semantischer und syntaktischer Verbesserungen.
Zu den offiziellen Methoden für den Start gehören ein Befehlszeilenprogramm, das unter node.js ausgeführt wird, und einfach die Quelle herunterladen und installieren. Hier gibt es nicht viel zu lenken. Laden Sie das Dienstprogramm node.js herunter und verwenden Sie es npm installiere coffee-script [oder für die Quelle, bin / cake installieren] installieren und loslegen.
Die Situation bei Windows ist etwas komplizierter. Es gibt keine direkte Möglichkeit, node.js oder die unter Windows [außerhalb von Cygwin] installierte Quelle zu erhalten. Ärgern Sie sich nie. Eine Reihe von Unternehmern hat Compiler geschrieben, die unter Windows nativ arbeiten. Ich habe ein paar unten aufgeführt:
Beachten Sie, dass der Compiler in kompilierter JavaScript-Form bei Interesse auch mit der Quelle gebündelt ist. Es ist unter der extra Verzeichnis mit einem offensichtlichen Namen.
Damit haben wir uns einen Überblick über einige Dinge verschafft, die Ihnen zeigen, wie Sie mit CoffeeScript JavaScript einfacher verwenden können!
Das erste, was Sie wissen müssen, ist, wie CoffeeScript Whitespace effektiv verwendet, um die Syntax zu vereinfachen. Menschen mit einem Python-Hintergrund werden dies als trivial empfinden, für die anderen jedoch eine kurze Erklärung.
Zunächst müssen Sie nicht jede Zeile mit einem Semikolon beenden. Das Beenden einer Zeile wird automatisch als das Ende dieser Anweisung interpretiert. Zum Beispiel das…
numbers = [0, 1, 2, 3] name = "NetTuts +"
… Bis hierunter:
var name, zahlen; Zahlen = [0, 1, 2, 3]; name = "NetTuts +";
Als Nächstes werden Sie glücklich sein zu wissen, dass Sie auf geschweifte Klammern verzichten können. Diese zahlreichen Klammern zum Öffnen und Schließen eines Blocks? Alles ist raus In CoffeeScript verwenden Sie eine Python-artige Einrückung, um den Anfang und das Ende eines Blocks anzuzeigen.
CoffeeScript erfordert keine unnötigen Klammern oder geschweiften Klammern.
Hier ist ein kurzes Beispiel. Ignoriere alles außer der Einrückung vorerst. Wir werden den Rest etwas später erreichen:
if chasedByCylons runForYourLife ()
… Kompiliert bis
if (chasedByCylons) runForYourLife ();
Wenn Sie immer noch etwas verwirrt sind, machen Sie sich keine Sorgen. Die Syntax wird erst sinnvoll, wenn wir die Sprache besser kennenlernen.
CoffeeScript bietet eine Reihe von Aliasnamen für Operatoren und Schlüsselwörter, um den Code lesbarer und intuitiver zu machen. Werfen wir einen Blick auf einige von ihnen.
Zunächst die Vergleichsoperatoren:
Accentsconagua
ist Karten zu === ist nicht kompiliert zu !== == und != kompilieren zu === und !== jeweils [als Best Practice]Lassen Sie uns sie schnell in Aktion sehen.
wenn die Hose eingeschaltet istFire lookForWater () wenn das Spiel nicht gut ist badMouth ();
… Was zu… kompiliert
if (pant === onFire) lookForWater (); if (Spiel! == gut) badMouth ();
Ziemlich einfach zu lesen, nein? Nun, wie logische Operatoren abgebildet werden.
und Karten zu && oder ist ein Alias für || nicht kompiliert bis ! Aufbauend auf unserem vorherigen Code:
wenn pant onFire ist und nicht aDream lookForWater () wenn das Spiel nicht gut ist oder hochmütigDevs badMouth ();
… Was zu… kompiliert
if (pant === onFire &&! aDream) lookForWater (); if (game! == good || haughtyDevs) badMouth ();
Wie du schon oben gesehen hast, das Grundlegende ansonsten Das Konstrukt verhält sich genauso wie normales JavaScript, ohne Klammern und geschweifte Klammern. Wir werden einige Variationen unten betrachten.
wenn müde und gelangweilt schlafen () sonst jog () // Raw JS unter if (müde & langweilig) sleep (); else jog ();
Und so wird der ternäre Operator behandelt:
activity = wenn Sonntag dann isChilling else isWorking // Raw JS unter activity = Sonntag? isChilling: isWorking;
Eine zusätzliche semantische Erweiterung ist bei der es sei denn Stichwort. Dies ist das genaue Gegenteil von ob.
keepRunning () sofern nicht müde keepWorking ist, es sei denn, der Fokus ist extrem niedrig
Und das kompilierte JavaScript…
if (! müde) keepRunning (); if (focus! == extremLow) keepWorking;
Schalteranweisungen können in JavaScript etwas stumpf sein. CoffeeScript bietet eine intuitive Umhüllung dieses Konstrukts.
Es beginnt mit dem Schalter Schlüsselwort, wie erwartet, gefolgt von der Variablen, deren Wert wir überprüfen. Jedem Fall oder möglichen Wert wird das vorangestellt wann Schlüsselwort gefolgt von den Anweisungen, die ausgeführt werden sollen, wenn es sich um eine Übereinstimmung handelt.
Es ist nicht notwendig, eine
brechenAnweisung am Ende jeder Case-Anweisung: CoffeeScript erledigt dies automatisch für Sie.
Zeit umschalten, wenn 6.00 Uhr wakeUp () jotDownList () wenn 9.00 Uhr, dann startWorking () wenn 13.00 Uhr, dann eat () wenn 23.00 Uhr beendetUpWork () sleep ()
Die Syntax sollte ziemlich selbsterklärend sein, wenn Sie das Äquivalent in JavaScript bereits kennen. Der einzige Punkt, der hier zu beachten ist, ist die Verwendung von dann Stichwort. Es wird verwendet, um die Bedingung vom Ausdruck zu trennen, ohne eine neue Zeile zu beginnen. Sie können dann auch für die anderen Bedingungsanweisungen sowie Schleifen verwendet werden.
Hier ist die JS, die CoffeeScript für Sie generiert:
Schalter (Zeit) Fall 6.00: wakeUp (); jotDownList (); brechen; Fall 9.00: startWorking (); brechen; Fall 13.00: essen (); brechen; Fall 23.00: finishUpWork (); schlafen(); brechen; default: doNothing ();
Die Schleife ist ein weiteres wesentliches Konstrukt für Ihren typischen JavaScript-Code. Sei es beim Durchlaufen von Zahlen in einem Array oder in Knoten im DOM, Sie müssen immer Sammlungen durchlaufen.
CoffeeScript bietet eine sehr flexible während Schleife, die geändert werden kann, um als generische Funktion zu fungieren zum oder mache es Schleife.
während der Arbeit> Zeit dann freakOut () während der Zeit> Arbeit relax () mozyAround () // Raw JS while (Arbeit> Zeit) freakOut (); while (Zeit> Arbeit) relax (); mozyAround ();
bis um ist eine weitere semantische Verbesserung und entspricht während nicht. Ein kurzes Beispiel unten:
workOut () bis zur Energie < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Das Durchlaufen von Arrays ist ziemlich einfach. Sie müssen das verwenden für in Konstruieren, um das Array zu durchlaufen. Lass mich dir zeigen wie:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] für eine Site in einer Site-Alarm-Site
Wenn Sie es vorziehen, dass die Anweisungen in derselben Zeile stehen:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] für eine Site in Sites
CoffeeScripts kompiliert diese zu basic zum Schleifen wie so. Beachten Sie, dass gemäß den bewährten Methoden die Länge des Arrays zuvor zwischengespeichert wird.
var site, sites, _i, _len; sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; für (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Das Iterieren über assoziierte Arrays [oder Hashes oder Wörterbücher oder Schlüsselwertpaare] ist mit dem von Stichwort.
Managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' für Site, Manager von Managern Alarmmanager + "verwaltet" + Site
Wie erwartet, kompiliert sich das Obige wie unten gezeigt in eine grundlegende for-Schleife:
var Manager, Manager, Standort; Managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; für (Standort in Managern) Manager = Manager [Standort]; Alarm (Manager + "verwaltet" + Site);
Das Erstellen und Verwenden von Funktionen ist unter CoffeeScript extrem einfach. Um eine Funktion zu definieren, listen Sie die Parameter auf, die es benötigt, und fahren dann mit dem Funktionskörper fort. Hier zeige ich Ihnen wie:
playing = (console, game = "Mass Effect") -> alert "Spielen von # game auf meiner # console." "Xbox 360", "New Vegas" spielen
Dies ist die grundlegende Syntax für das Erstellen und Verwenden von Funktionen. Der Standardwert für Parameter kann inline definiert werden. CoffeeScript generiert den Code, um zu prüfen, ob ein Wert übergeben wurde oder nicht.
Das Aufrufen einer Funktion ist genauso einfach. Es gibt keine Notwendigkeit für Klammern: Übergeben Sie die Parameter nacheinander.
Wie immer ist hier der generierte Code für Ihre Referenz:
var spielen; Spielen = Funktion (Konsole, Spiel) if (Spiel == null) game = "Mass Effect"; Warnung zurückgeben ("Playing" + game + "auf meiner" + console + "."); ; Spielen ('Xbox 360', 'New Vegas'); Manchmal haben Sie keine andere Wahl, als in Ihrem CoffeeScript-Code reines JavaScript zu verwenden. Hoffentlich sollten diese Fälle weit und breit sein, aber dies wurde ebenfalls berücksichtigt.
Sie können rohe JS in Ihren Code injizieren, indem Sie ihn mit gravierenden Akzenten einwickeln, die auch als Backquote oder Backtick bezeichnet werden. Alles, was so übergeben wird, bleibt vom CoffeeScript-Compiler völlig unberührt.
rawJS = 'function () return someSuperComplexThingie; '// welche Netze Sie var rawJS; rawJS = function () return someSuperComplexThingie; ;
Ihnen passiert nichts, sie können genau dort bleiben, wo sie sind. CoffeeScript funktioniert nahtlos mit jeder Bibliothek von Drittanbietern, egal ob groß oder klein, da es einfach zu rohem JavaScript kompiliert wird. Sie müssen Ihren Code nur geringfügig umformatieren und / oder umgestalten, aber ansonsten sollten Inkompatibilitäten kein Problem darstellen.
Also anstatt dies zu schreiben:
$ (document) .ready (function () elemCollection = $ ('. collection'); für (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); ); … Du würdest schreiben…
$ (document) .ready -> elemCollection = $ ('. collection') für Element in elemCollection colortoAdd = if item.hasProperty (), dann yesColor, sonst noColor $ (item) .css 'Hintergrundfarbe', colortoAdd Und wir haben ein Ende gefunden. Ich habe mich nicht mit einer Reihe von übergeordneten Themen befasst, beispielsweise mit Klassen, da sie weit über den Rahmen eines einleitenden Artikels hinausgehen. Suchen Sie nach ein paar fortgeschrittenen CoffeeScript-Tutorials!
Ich denke, CoffeeScript hat die Art und Weise, wie ich JavaScript schreibe, verändert. Nachdem ich dies gelesen habe, hoffe ich, dass es auch Ihre geändert hat. Fragen? Schöne Dinge zu sagen? Kritikpunkte Schlagen Sie den Kommentarbereich an und hinterlassen Sie einen Kommentar. Viel Spaß beim Kodieren und vielen Dank für das Lesen!
