LearnThe Absolute Beginner’s Guide to CoffeeScript

CoffeeScript ist in den letzten Jahren aufgrund seiner Einführung durch den Knoten immer beliebter geworden.js- und Rails-Communities. Werfen wir einen Blick darauf, warum es zur bevorzugten Sprache geworden ist, wenn Leute JavaScript in ihre Apps schreiben möchten.

Was ist CoffeeScript?

CoffeeScript ist eine Sprache, die zu JavaScript kompiliert wird. Code ein .coffee-Dateien werden zur Laufzeit nicht wie JavaScript interpretiert, sondern in kompiliert .js-Dateien.

Ob Sie für JavaScript für den Knoten schreiben.js oder eine bestimmte Browser-Implementierung, CoffeeScript kann für alle Arten von JavaScript geschrieben werden.

Warum CoffeeScript?

In der Vergangenheit hatte JavaScript aufgrund der Copy-and-Paste-Mentalität der 90er und frühen 2000er Jahre nicht den besten Ruf. Es wurde als nicht so „ernsthafte“ Sprache angesehen. JavaScript als Sprache hat jedoch viel zu bieten und verfügt über einige super Funktionen.

CoffeeScript nutzt die leistungsstarken Funktionen von JavaScript, ohne die weniger bekannten Funktionen von JavaScript zu erlernen, indem es JavaScript „syntaktischen Zucker“ hinzufügt. CoffeeScript hat keine Semikolons und geschweiften Klammern, ähnliche Syntax wie Python und Ruby.

Dies bedeutet, dass Sie weniger Code schreiben und die Dinge schneller erledigen können. Es macht es auch einfacher zu lesen und zu pflegen.

Aufgrund von Optimierungen, die CoffeeScript verwendet, ist das resultierende JavaScript beim Kompilieren genauso performant oder in einigen Fällen sogar performanter als handgeschriebener Code.

Sie können viel über JavaScript lernen, indem Sie sich das JavaScript ansehen, zu dem CoffeeScript kompiliert. Wenn Sie dort etwas Neues sehen, recherchieren Sie es und sehen Sie, warum CoffeScript so kompiliert wird und nicht das, was Sie gewohnt sind.

CoffeeScript installieren

Lassen Sie uns CoffeeScript installieren, damit Sie folgen können. CoffeeScript ist ein Knoten.js-Paket. Es hängt also vom Knoten ab.js und der Paketmanager (npm).

Auf OS X

Knoten.js kann mit Homebrew, einem Open-Source-Paketmanager für OS X, installiert werden.

Stellen Sie sicher, dass Homebrew auf dem neuesten Stand ist, indem Sie brew update in Ihr Terminal eingeben.

Die Homebrew-Formel für Node.js ist node. Also Knoten installieren.dann geben Sie brew install node in Ihr Terminal ein. Befolgen Sie alle zusätzlichen Anweisungen, die angezeigt werden, wenn Sie PATHs oder ähnliches ändern müssen.

Geben Sie dann npm install -g coffee-script ein, um es global zu installieren.

Unter Windows

Besuchen Sie Node.js‘ Website und drücken Sie die Schaltfläche „Installieren“. Es sollte Ihre Windows-Version, die Sie verwenden, automatisch erkennen und ein Installationsprogramm wird heruntergeladen.

Gehen Sie durch den Installationsprozess.

Sobald es installiert ist, öffnen Sie Ihre Eingabeaufforderung und geben Sie npm install -g coffee-script ein, um es global zu installieren.

Und schließlich

Geben Sie coffee -v in Ihre Befehlszeile ein, um zu sehen, ob es korrekt installiert wurde.

Verwendung der Befehlszeile

Der coffee Compiler kann auf verschiedene Arten verwendet werden. Hier ist ein paar, um zu sehen, was verfügbar ist.

Ausführen und Kompilieren

Der folgende Befehl kompiliert alle Ihre .coffee Dateien in einem Ordner namens coffeescripts zu .js Dateien in einer parallelen Baumstruktur im Ordner javascripts.

coffee -o javascripts/ -c coffeescripts/

Warnung

Die Option -c bedeutet Kompilieren und -o bedeutet den Ausgabeordner. Beachten Sie, dass die Bestellung ausgegeben und dann kompiliert wird. Dies liegt daran, dass es nicht funktioniert, wenn Sie die Reihenfolge ändern!

Watcher

Führen Sie den obigen Befehl jedes Mal aus, wenn Sie CoffeeScript-Dateien kompilieren möchten, damit Sie eine weitere praktische Option verwenden können, -w .

coffee -w -o javascripts/ -c coffeescripts/

Der Watcher lauscht Änderungen an den Dateien im coffeescripts Ordner und kompiliert sie im laufenden Betrieb.

Wenn Sie dem coffeescripts Ordner eine neue Datei hinzufügen, sollte der Ordner kompiliert werden. Dies könnte sich in späteren Versionen ändern.

Dateien zusammenfügen

Sie können auch alle Ihre .coffee Dateien zu einer einzigen JavaScript-Datei kompilieren. Dies reduziert die Anzahl der HTTP-Anfragen, die ein Browser stellen muss, und verbessert die Leistung. Verwenden Sie dazu die -j Option wie folgt:

coffee -j javascripts/app.js -c coffeescripts/*.coffee

Die * ist ein Platzhalteroperator.

REPL

Wenn Sie coffee ohne Optionen eingeben, wird eine interaktive Shell geöffnet. Dies ähnelt irb in Ruby. Dies ist ein großartiges Werkzeug, um Dinge in der Konsole zu erledigen und schnelle Experimente durchzuführen.

Texteditor-Hervorhebung

Wenn Sie in CoffeeScript codieren, ist das Beste, was Sie tun können, eine Syntaxhervorhebung.

TextMate

Jeremy Ashkenas, der Erfinder von CoffeeScript, hat ein praktisches TextMate-Bundle erstellt. Eine Installationsanleitung finden Sie hier.

Sublime Text 2

Sublime Text 2 verfügt über ein Plugin, das vom GitHub-Benutzer Xavura erstellt wurde. Sie können dies über das Sublime Package Control installieren, falls Sie dies bereits haben.

Das Gute a.k.a. Die Syntax

Variablen

Variablen in CoffeeScript erfordern nicht das Schlüsselwort var. Benennen Sie einfach Ihre Variable, ein Gleichheitszeichen und dann den Wert.

year = 1985speed = 88

Strings

Strings werden wie in den meisten anderen Sprachen mit Anführungszeichen deklariert.

first_name = "Marty"

Um Zeichenfolgen zu verbinden oder zu verketten, können Sie sie nacheinander mit einem Pluszeichen dazwischen auflisten:

full_name = first_name + " McFly"

Sie können auch das Hash-Symbol (#), gefolgt von geschweiften Klammern, und innerhalb dieser die Zeichenfolgenvariable einfügen.

full_name = "#{first_name} McFly"

Die beiden obigen Beispiele würden den String Marty McFly erzeugen.

Die letztere Art der String-Interpolation funktioniert nur, wenn Sie doppelte Anführungszeichen verwenden. Wenn Sie einfache Anführungszeichen verwenden, wird der Text „wie besehen“ angezeigt. Einfache Anführungszeichen sind literale Zeichenfolgen.

full_name = '#{first_name} McFly'

Das Obige ist also die Zeichenfolge von #{first_name} McFly . Dies spiegelt das Verhalten wider.

Funktionen

Funktionen werden deklariert, indem die Funktion, das Gleichheitszeichen und dann ein spezielles Funktionssymbol benannt werden (->).

Wir haben das Schlüsselwort return nicht verwendet, da jede Funktion in CoffeeScript das Ergebnis der letzten Codezeile zurückgibt.

Mehrzeilige Funktionen werden in mehreren Zeilen geschrieben, wobei jede Zeile nach der Deklaration einen Leerraum davor hat.

initialize_time_circuits = -> year = 1885 year * flux_capacitor_constant * speed

Dies würde das Jahr jedes Mal auf 1885 setzen. Wenn wir möchten, dass das Jahr viel flexibler ist, aber einen Standardwert hat, können wir es wie folgt in die Methodendeklaration aufnehmen:

initialize_time_circuits = (speed, year = 1885) -> year * flux_capacitor_constant * speed

Dies bedeutet, dass wir dies dann mit einem Wert des speed aufrufen können Die year wird immer standardmäßig auf 1885.

 initialize_time_circuits(88)

Sie können Methoden auch ohne Klammern aufrufen. Das Obige kann auch wie folgt geschrieben werden:

 initialize_time_circuits 88

Arrays

Es gibt verschiedene Möglichkeiten, Arrays in CoffeeScript zu initialisieren und zu deklarieren. Sie sind es wahrscheinlich gewohnt, Arrays zu sehen, die mit eckigen Klammern und durch Kommas getrennten Werten deklariert sind.

 mcflys = 

Sie können Arrays auch wie folgt über mehrere Zeilen deklarieren:

 mcflys = 

Sie müssen in jeder Zeile Leerzeichen haben.

Optional können Sie das nachfolgende Komma aus jeder Zeile entfernen.

 mcflys = 

Sie können auch eine Kombination dieser beiden Deklarationsstile verwenden.

Das folgende Beispiel…

woah = 

…entspricht:

woah = 

Was je nach Anwendung mehr oder weniger lesbar sein kann. Mit CoffeeScript können Sie dies auf verschiedene Arten tun, um Ihren Anforderungen gerecht zu werden.

Objekte

Objektliterale oder Hashes können wie ihre JavaScript-Gegenstücke und auf andere funky Weise deklariert werden.Sie können die Kommas und geschweiften Klammern löschen:

Solange Sie mit etwas Leerzeichen einrücken, wird die Struktur wie erwartet verschachtelt.

Ranges

Ranges werden durch zwei durch zwei Punkte getrennte Ganzzahlen deklariert, die in eckige Klammern gesetzt sind.

days = 

Bereiche sind kein Standardobjekttyp in Javascript, daher werden sie zu Arrays kompiliert.

Um einen Unterabschnitt eines Arrays zu erhalten, können Sie auch einen Bereich übergeben. Möchten Sie Tage von tuesday_to_friday wo Montag ist 1 und Sonntag ist 7 ? Da Arrays nullbasiert indiziert sind, beginnen wir bei 1 und enden bei 4.

days = tuesday_to_friday = days

Sie können auch ganze Abschnitte von Arrays auf ähnliche Weise ersetzen.

Das folgende…

days = 

Ändert das Array days in .

Sie können auch Bereiche zum Countdown verwenden, zum Beispiel wäre 10 zu 0.

Splat

Ein Splat ist eine bequeme Möglichkeit, mehrere Werte als Argumente für Methoden zu akzeptieren.

Im folgenden Beispiel möchten wir einer Gruppe von Forumbenutzern Kudos-Punkte für die Anzahl der Beiträge in einer bestimmten Woche vergeben.

Die erste Person erhält 10 Punkte, die zweite 6, die dritte 2 und alle anderen erhalten einen einzigen Punkt.

Erstellen wir eine Funktion, giveKudos Mit firstsecond und third als Parameter. Für den Rest verwenden wir einen Splat, der der Name der Variablen ist, gefolgt von 3 Perioden. Innerhalb der giveKudos Methode rufen wir ein nicht implementiertes addKudosToUser auf, das zwei Parameter benötigt, den Benutzer und die hinzuzufügenden Punkte. Wir werden uns nicht um die Implementierung kümmern, sondern nur zur Veranschaulichung.

giveKudos = (first, second, third, rest...) -> addKudosToUser first, 10 addKudosToUser second, 6 addKudosToUser third, 2

Als nächstes können wir eine for in verwenden, um die rest .

Da wir eine Reihe von Benutzern haben:

users = 

Wir wollen, dass Pasan 10 Punkte bekommt, Amit 6, Jim 2 und dann der Rest 1.

Wir müssen Benutzer mit den Perioden in der Methode übergeben, um die Array-Werte den Parametern wie folgt zuzuweisen:

giveKudos users...

Ohne diese Perioden users get wird dem Parameter first zugewiesen und undefined zum Rest.

Klassen

Klassen können trivial in CoffeeScript deklariert werden, was einen erfrischenden Kontrast zum viel ausführlicheren JavaScript darstellt.

Schreiben Sie zuerst das Schlüsselwort class, gefolgt vom Namen Ihrer Klasse.

Methoden, einschließlich der Konstruktormethode, werden mit dem Namen der Methode gefolgt von einem Doppelpunkt geschrieben. Leerzeichen werden vor jedem Methodennamen benötigt. Sie können dann den Funktionsoperator (->) verwenden.

class TimeMachine constructor: ->

Um eine Instanz eines Objekts zu instanziieren, verwenden Sie das Schlüsselwort new gefolgt vom Klassennamen.

time_machine = new TimeMachine

Instanzvariablen

Instanzvariablen beginnen mit einem @ Symbol. Wir können also einen Piloten haben

class TimeMachine constructor: (pilot) -> @pilot = pilot

Sie können auch über die Punktnotation darauf zugreifen.

class TimeMachine constructor: (pilot) -> @pilot = pilot time_machine = new TimeMachine "H. G. Wells"console.log time_machine.pilot

Im obigen Beispiel würde die Zeichenfolge H. G. Wells auf der Konsole gedruckt.

Anstatt @pilot = pilot können Sie es in Kurzschrift wie folgt schreiben:

class TimeMachine constructor: (@pilot) ->

Klassenvererbung

Um eine Unterklasse zu schreiben, können Sie extends wie folgt verwenden:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

Sagen wir TimeMachine hat eine Methode go mit einem Parameter, der abgemeldet wird, wenn die Zeitmaschine im Begriff ist, in der Zeit zu reisen.

class TimeMachine constructor: (@pilot) -> go: (noise) -> console.log noise

Lassen Sie uns nun für jede Time Machine-Implementierung die super -Methode aufrufen.

Wenn Sie also go() auf Instanzen beider Zeitmaschinen aufrufen, wird ein eigener Sound ausgegeben.

Allgemeine Syntax

Mit CoffeeScript sieht Ihr Code eher wie ein Satz in Englisch aus:

light_bulbs() if switch is on

Das ist dasselbe wie:

light_bulbs() unless switch is not on

Während letzteres schwieriger zu analysieren ist als ersteres, zeigt es Ihnen den Umfang des neuen Zuckers.

Hier ist eine Tabelle mit Entsprechungen von der CoffeeScript-Dokumentationsseite zu Operatoren und Aliasen.

CoffeeScript	JavaScript
ist	===
ist nicht	!==
nicht	!
and	&&
or	||
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	no JS equivalent

Existential Operator

CoffeeScript brings another cool operator to the table called the Existential Operator, which is a question mark (?).

Angenommen, ein user ist noch nicht angemeldet und wurde noch nicht festgelegt. Sie möchten, dass die Login-Funktion aufgerufen wird, wenn user nicht vorhanden ist, dann verwenden Sie einfach den Existentialoperator wie folgt:

login() if not user?

Sie können auch Standardwerte wie folgt festlegen:

year ?= 1885

Sie können den Existentialoperator ähnlich wie einen ternären Operator verwenden. Im folgenden Beispiel wäre greeting entweder message, wenn nicht undefined oder die Zeichenfolge `“Hello, World!“.

greeting = message ? "Hello, World!"

Endlich gibt es eine Accessor-Variante, die Sie verwenden können, um null Referenzen zu erstellen, wenn Sie Eigenschaften miteinander verketten.

ip = securitySystem.lastUser?().remoteSystem?.ipAddress

Anstatt also eine TypeError dies würde undefined .

Comprehensions

Comprehensions kann Ihren Code lesbarer machen. In unserem Kudos-Beispiel hatten wir die for Schleife, die über zwei Zeilen ging, als wir sie in einer Zeile wie folgt hätten schreiben können:

Ein weiteres cooles Feature beim Durchlaufen von Dingen in CoffeeScript ist, dass die Schleife ein Array der Ergebnisse dieser Schleife zurückgibt. Angenommen, ich möchte von 0 bis 100 in Vielfachen von 10 zählen. Ich stelle meiner Schleife nur eine Variablenzuweisung wie folgt voran:

multiples = for num in num * 10

Wenn Sie Klammern hinzufügen, können Sie sie auch in eine Zeile einfügen!

multiples = (num * 10 for num in )

Fazit

Woah! Das war eine Menge zu nehmen, aber wie Sie sehen können, ist CoffeeScript voller leckerer zuckerhaltiger Syntax. Warum nicht in Ihrem nächsten JavaScript-Projekt eine Bash geben und sehen, was es unter der Haube kompiliert?

• Anfängerleitfaden zu Coffeescript
• coffeescript
• Programmieren lernen
• eine Website erstellen