Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Rockend mit CoffeeScript

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Auch wenn CoffeeScript eine neue Sprache ist, lernen Sie es sehr schnell. Sie sollten, da es nur JavaScript ist, mit ein paar auffälligen Klamotten, immerhin. Es liest sich wie Ruby oder Python, kompiliert aber zu reinem, nicht-flauschigem JavaScript. Heute werden wir uns anschauen, warum alle über CoffeeScript sprechen.


Ein Wort vom Autor

Mit dem Aufkommen von leistungsstarken JavaScript-Engines, wie V8, hat JavaScript sein Stigma eines manipulierten Tools für jugendliche Interaktionen abgelöst und sich zu einem echten Kraftpaket gemausert. Es ist sogar von clientseitigen Anwendungen zur Serverseite gesprungen, zum Beispiel node.js. Die Tatsache, dass es sich an eine ziemlich geschickte, prototypbasierte Ideologie hält, tut ihm auch nicht weh. Es besteht kein Zweifel, dass JavaScript jetzt und in absehbarer Zukunft eine kritische Sprache ist.

Aber ich habe immer die Syntax selbst als etwas klatschig empfunden. Nachdem ich in den letzten paar Jahren mit einer Mischung aus Ruby und Python gearbeitet habe, fand ich die von JavaScript-Semikolon infundierte, klammerabhängige, ausführliche Syntax zu langwierig. Und von dem, was ich sammeln kann, bin ich nicht allein darin, so zu fühlen. Hier kommt CoffeeScript zur Hilfe!


Was ist CoffeeScript?

CoffeeScript kompiliert bis zum rohen JS.

CoffeeScript ist im Wesentlichen nur eine syntaktische Neuschreibung von JavaScript. Die Kernsprache selbst bleibt gleich, mit kleinen semantischen Erweiterungen. Die Syntax wurde modifiziert, nach Python und Ruby modelliert.

Denken Sie daran, dass der CoffeeScript-Compiler sauberes JavaScript ausgibt, das nicht nur den Best Practices entspricht und hervorragend lesbar ist, sondern auch JSLint übergibt. Dies bedeutet, dass Sie sich keine Sorgen über die Kompatibilität auf der ganzen Linie machen müssen. Im schlimmsten Fall des Sterbens dieses Projekts können Sie einfach das makellose JS, das CoffeeScript generiert und mit Ihrem Code fortfahren, aufgreifen. Sie sind nicht in diese Umgebung eingeschlossen.

Dies mag wie ein außerirdisches Konzept erscheinen, aber unter dem Dach der Web-Entwicklung haben wir bereits unseren gerechten Anteil an dieser Ideologie gesehen. HAML ist nur eine neue Art, HTML zu schreiben, während SASS dasselbe für CSS tut. Sie alle bereinigen die Struktur und Syntax ihrer Sprachen und erleichtern so die Arbeit mit ihnen und steigern so unsere Produktivität.


Irgendein schneller Code

Sie wundern sich wahrscheinlich, wie der Code selbst aussieht, hier ein kurzer Blick:

Dies ist eine schnelle Implementierung einer binären Suche. Versuchen Sie nicht, den Code selbst jetzt zu analysieren. Versuchen Sie sich einfach mit der Syntax vertraut zu machen.

Unten ist der JavaScript-Code, den CoffeeScript generiert:


Vor-und Nachteile

Hier sind einige schnelle Vor- und Nachteile der Verwendung von CoffeeScript. Dies ist keineswegs umfassend, aber ich denke, das reicht aus, um einen schnellen Überblick über das System zu bekommen.

Ja

  • Python-Stil-Whitespace
  • Ruby-Stil leichte Syntax
  • Kurze Funktionsdeklarationen
  • JSLint genehmigt
  • Klassenbasierte Vererbung

Es gibt natürlich zahlreiche andere Punkte einschließlich semantischer und syntaktischer Verbesserungen.

Nein

  • Leichte Lernkurve beteiligt
  • Je nach Route ist die Bereitstellung eine lästige Pflicht
  • Sie benötigen grundlegende Kenntnisse von JS zu Debugging-Zwecken. Du kannst hier natürlich nicht direkt anfangen.

Anfangen

Zu den offiziellen Methoden für den Start gehört ein Befehlszeilendienstprogramm, das unter node.js ausgeführt wird und einfach die Quelle herunterlädt und installiert. Es gibt hier nicht viel zu sagen. Rufen Sie das Dienstprogramm node.js auf und installieren Sie npm install coffee-script [oder für die Quelle bin/cake install], und starten Sie es.

Die Situation mit Windows ist etwas komplizierter. Es gibt keinen direkten Weg, um node.js oder die Quelle unter Windows [außerhalb von Cygwin] zu installieren. Aber sorge dich nie. Eine Reihe von unternehmungslustigen Leuten haben Compiler geschrieben, die nativ auf Windows arbeiten. Ich habe ein paar unten aufgeführt:

Beachten Sie, dass der Compiler im kompilierten JavaScript-Formular bei Bedarf auch mit der Quelle gebündelt ist. Es ist unter dem zusätzlichen Verzeichnis mit einem offensichtlichen Namen vorhanden.

Danach werden wir uns eine Handvoll Dinge ansehen, die Ihnen zeigen, wie mit CoffeeScript JavaScript leichter zu konsumieren ist!


Verwendung von Whitespace

Das erste, was Sie wissen müssen, ist, wie CoffeScript Whitespace effektiv verwendet, um die Syntax zu vereinfachen. Personen mit einem Python-Hintergrund finden dies trivial, aber für die anderen ist hier eine kurze Erklärung.

Zuerst 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 ..

.. kompiliert sich dazu:

Als nächstes werden Sie froh sein zu wissen, dass Sie geschweifte Klammern entfernen können. Diese zahlreichen Klammern zum Öffnen und Schließen eines Blocks? Alles ist draußen. In CoffeeScript verwenden Sie Python-artige Einrückung, um den Anfang und das Ende eines Blocks zu kennzeichnen.

CoffeeScript benötigt keine unnötigen Klammern oder geschweiften Klammern.

Hier ist ein kurzes Beispiel. Ignoriere alles außer dem Einzug für den Moment. Etwas später kommen wir zum Rest:

.. kompiliert nach unten

Wenn Sie immer noch ein wenig verwirrt sind, machen Sie sich keine Sorgen. Die Syntax wird erst dann sinnvoller, wenn wir die Sprache besser kennen.


Schlaue, semantische Aliase

CoffeeScript bietet eine Reihe von Aliasen für Operatoren und Schlüsselwörter, um den Code lesbarer und intuitiver zu machen. Werfen wir einen Blick auf einige von ihnen jetzt.

Zuerst die Vergleichsoperatoren:

  • is Karten zu ===
  • isnt zu kompiliert !==
  • == und != kompilieren zu === und !== bzw. [Als bewährte Methode]

Lassen Sie uns sie schnell in Aktion sehen.

..welche kompiliert ..

Ziemlich leicht zu lesen, nicht? Nun, wie logische Operatoren abgebildet werden.

  • and Karten zu &&
  • or ist ein Alias für ||
  • not zu kompiliert !

Aufbauend auf unserem vorherigen Code:

..welche kompiliert ..


Bedingungen

Wie Sie bereits oben gesehen haben, verhält sich das grundlegende if/else-Konstrukt genauso wie in normalem JavaScript, ohne Klammern und geschweifte Klammern. Wir werden uns unten einige Variationen ansehen.

Und so wird der ternäre Operator behandelt:

Eine zusätzliche semantische Erweiterung ist mit dem Schlüsselwort außer unless. Dies funktioniert genau wie das Gegenteil von if.

Und das kompilierte JavaScript ...


Schaltergehäuse

Switch-Anweisungen können in JavaScript ein wenig stumpf sein. CoffeeScript bietet einen intuitiven Wrapper um dieses Konstrukt.

Es beginnt wie erwartet mit dem switch-Schlüsselwort, gefolgt von der Variablen, deren Wert wir überprüfen. Jedem Fall oder möglichen Wert ist das Schlüsselwort when gefolgt von den auszuführenden Anweisungen vorangestellt, wenn es sich um eine Übereinstimmung handelt.

Am Ende jeder case-Anweisung muss keine break-Anweisung hinzugefügt werden: CoffeeScript erledigt dies automatisch für Sie.

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 des then-Schlüsselworts. 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 bedingten Anweisungen als auch für Schleifen verwenden.

Hier ist das JS, das CoffeeScript für Sie generiert:


Grundlegende Loops

Schleifen ist ein weiteres wesentliches Konstrukt für Ihren typischen JavaScript-Code. Sei es das Durchlaufen von Zahlen in einem Array oder Knoten im DOM, Sie müssen immer durch Sammlungen blättern.

CoffeeScript bietet eine sehr flexible while-Schleife, die so modifiziert werden kann, dass sie als generische for oder do-while-Schleife funktioniert.

until ist eine weitere semantische Erweiterung und ist äquivalent zu, while not. Ein kurzes Beispiel unten:


Durch Sammlungen streifen

Looping über Arrays ist ziemlich einfach. Sie müssen das for..in Konstrukt verwenden, um durch das Array zu gehen. Lassen Sie mich Ihnen zeigen, wie:

Wenn Sie bevorzugen, dass die Anweisungen in derselben Zeile stehen:

CoffeeScript-Compiler diese for einfache Schleifen wie folgt. Beachten Sie, dass die Länge des Arrays gemäß den Best Practices zuvor zwischengespeichert wurde.

Das Iterieren über assoziative Arrays [oder Hashes oder Wörterbücher für Schlüssel / Wert-Paare] ist mit dem Schlüsselwort of genauso einfach.

Wie erwartet, kompiliert das oben genannte zu einer Basis für Schleife wie unten gezeigt:


Funktionen

Das Erstellen und Verwenden von Funktionen ist unter CoffeeScript sehr einfach. Um eine Funktion zu definieren, listen Sie die Parameter auf und gehen dann zum Körper der Funktion über. Hier, lassen Sie mich Ihnen zeigen, wie:

Dies ist die grundlegende Syntax hinter dem 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, hier ist der generierte Code für Ihre Referenz:


Einbetten von Roh-JavaScript

Manchmal haben Sie möglicherweise keine andere Wahl als rohen JavaScript in Ihrem CoffeeScript-Code zu verwenden. Hoffentlich sollten diese Instanzen weit und wenig voneinander entfernt sein, aber dies wurde ebenfalls berücksichtigt.

Sie können rohen JS in Ihren Code injizieren, indem Sie ihn mit gravierenden Akzenten versehen, die auch als Backquote oder Backtick bezeichnet werden. Alles, was reingegeben wird, wird vom CoffeeScript-Compiler völlig unangetastet bleiben.


Was passiert mit meinen Bibliotheken?

Ihnen passiert nichts, sie können genau dort bleiben, wo sie sind. CoffeeScript arbeitet nahtlos mit jeder großen oder kleinen Bibliothek von Drittanbietern zusammen, da sie einfach zu Roh-JavaScript kompiliert wird. Sie müssen Ihren Code nur leicht umformatieren und / oder umgestalten, aber ansonsten sollten Inkompatibilitäten kein Problem sein.

Also anstatt das zu schreiben:

... würdest du schreiben ..


Das war's Leute

Und wir sind zu Ende. Ich habe eine Reihe von Themen auf höherer Ebene, z. B. Klassen, nicht behandelt, weil sie den Rahmen eines einleitenden Artikels sprengen würden. Suchen Sie nach einigen fortgeschrittenen CoffeeScript Tutorials auf dem Weg!

Ich denke, CoffeeScript hat die Art und Weise verändert, wie ich JavaScript schreibe, und nachdem ich dies gelesen habe, hoffe ich, dass es auch deine geändert hat. Fragen? Schöne Dinge zu sagen? Kritik? Treffe den Kommentarbereich und hinterlasse mir einen Kommentar. Happy Coding und vielen Dank für das Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.