Let's face it, JavaScript hat nicht immer den besten Ruf unter den Entwicklern gehabt, und seit der Gründung von CoffeeScript im Jahr 2009 hat diese kleine Sprache die Welt der JavaScript-Entwickler im Sturm erobert; vor allem, weil es den schlimmsten Aspekt von JavaScript überwindet: die Syntax seines Codes.
Auch wenn dies eine neue Sprache ist, werden Sie sie sehr schnell aufnehmen, hauptsächlich weil JavaScript neu formuliert wird. Es ist wesentlich hübscher, einfacher JavaScript.
Vergessen Sie beim Schreiben von CoffeeScript nicht, dass Sie Code schreiben, der vor der Implementierung in JavaScript kompiliert wird, das den Best Practices entspricht und den JSLint-Test besteht. Das ist also eine Sache, über die Sie sich Gedanken machen müssen. Die Ausgabe wird weiterhin gültig sein, JavaScript, dass der Browser kein Problem beim Lesen haben wird. CoffeeScript ist für JavaScript, was SASS für CSS ist: eine Möglichkeit, einfacheren und produktiveren Code zu schreiben.
CoffeeScript ist ein Dienstprogramm node.js. Um es zu installieren, müssen Sie node.js und den Knoten-Paket-Manager installiert haben. Angenommen, Sie haben diese beiden Pakete installiert, müssen Sie nur zu Ihrem Terminal gehen und CoffeeScript mit dem Paketmanager mit dem folgenden Code installieren:
npm install -g coffee-scriptDamit haben Sie CoffeeScript auf Ihrem Rechner installiert. Um eine .coffee-Datei in eine JavaScript-Datei zu kompilieren, müssen Sie Folgendes eingeben:
coffee --compile script.coffeeDies wird die Datei script.coffee in script.js im selben Verzeichnis kompilieren, tut dies aber nur, wenn Sie den Befehl ausführen, wenn Sie bei jeder Änderung, die Sie in der Kaffeedatei vornehmen, die -watch vorher hinzufügen müssen das Kompilieren:
coffee --watch --compile script.coffeeDadurch wird Ihr JavaScript jedes Mal kompiliert, wenn Sie Ihre .coffee-Datei ändern.
Beim Schreiben einer JavaScript-Variablen müssen wir das var-Schlüsselwort voranstellen, mit CoffeeScript ist dieses Schlüsselwort weg und Sie können einfach die Variable eingeben und sie etwas zuweisen. Eine andere Sache, auf die Sie achten sollten, ist, dass CoffeeScript viele Einrückungsmethoden verwendet, um Semikolons zu vermeiden, und damit die Sprache versteht, dass die Variablenanweisung vollständig ist, müssen Sie nur in eine neue Zeile wechseln:
age = 21country = "Portugal"In JavaScript müssten Sie Folgendes eingeben:
var age = 21;var country = "Portugal";Es ist ein kleines Beispiel, aber Sie können sehen, wie leistungsfähig CoffeeScript ist, wenn es darum geht, Ihren Code zu vereinfachen.
Erinnern Sie sich an all die Zeit, die Sie damit verbracht haben, JavaScript-Operatoren zu lernen Erinnern Sie sich, warum Sie === verwenden mussten anstatt nur zu verwenden? Nun, CoffeeScript kümmert sich auch darum. Es bietet einige wirklich nette Aliase für die Operatoren:
Eine andere Sache, die CoffeeScript loswird, sind geschweifte Klammern. Es verwendet die Einrückungsmethode, um zu deklarieren, wenn Sie in einer Anweisung sind, wenn Anweisungen wie JavaScript funktionieren, aber Sie die geschweiften Klammern oder die Klammer nicht benötigen; Füge einfach den Code ein, den du ausführen möchtest, wenn die Aussage wahr ist:
if work > 24 and sleep < 8vacations()elsework()wird in JavaScript kompilieren als:
if (work > 24 && sleep < 8) {vacations();} else {work();}Ich hoffe, dass Sie beginnen, die Vorteile von CoffeeScript zu sehen, nur mit diesen einfachen Demonstrationen, wie sauber es Ihren Code machen kann, und sauberer Code bedeutet mehr wartbaren Code.
Das Durchlaufen von Arrays ist eines der Dinge, die Sie in jeder JavaScript-Anwendung, die Sie schreiben, tun müssen, und die Syntax zum Durchlaufen in JavaScript ist nicht die einfachste oder die sauberste. Um ein Array zu durchlaufen, verwenden wir eine for..in-Schleife, wie folgt:
tasks = ['Design','Code','Groceries']for task in tasksalert taskDas ganze Stück Code liest alle Dinge im Array und alarmiert dann eins nach dem anderen, nur um die Dinge noch einfacher zu machen, können Sie sogar die for ... in Schleife in einer Zeile schreiben, so:
tasks = ['Design','Code','Groceries']alert task for task in tasksEs ist einfach viel besser lesbar und wartbarer als das JavaScript von Vanilla, wobei es sich um den Code handelt, der von CoffeeScript für diese beiden Zeilen erzeugt wird:
var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}While-Schleifen sind auch beim Erstellen Ihrer JavaScript-App sehr hilfreich, und CoffeeScript erleichtert das Lesen und Schreiben nicht, beispielsweise:
while sleep < 8sleep()Oder Sie können alles auf eine Zeile schreiben, wenn Sie bevorzugen:
while sleep < 8 then sleep()Oder:
sleep() until sleep > 8In reinem JavaScript würde dies bedeuten:
//thenwhile (sleep < 8) {sleep();}Oder:
//untilwhile (!(sleep > 8)) {sleep();}Funktionen sind auch ein weiterer wichtiger Teil jeder Programmiersprache und obwohl Funktionen in JavaScript nicht so chaotisch sind wie einige andere Teile, vereinfacht CoffeeScript dies ebenfalls, eine einfache Funktion, die den Namen einer Person nimmt und sie dann alarmiert, kann so geschrieben werden :
sayHi = (name) ->return "Hello " + namealert sayHi('Sara')Sie müssen nur die Funktion benennen, in diesem Fall heißt die Funktion sayHi, und nach dem Gleichheitszeichen müssen Sie die Parameter angeben. Hier ist der Name der einzige Parameter, nachdem die Basis unserer Funktion definiert ist, müssen wir tippen -> gefolgt von der nächsten Zeile mit dem, was wir wollen, damit die Funktion funktioniert, damit CoffeeScript weiß, dass wir innerhalb der Funktion sind. In diesem Fall ist alles, was ich tun will, "Hallo" und dann der Name der Person und zuletzt verwende ich eine einfache Warnung, um die Funktion mit dem Namen aufzurufen. Wir können dies auch in einer Zeile schreiben, indem wir die Eingabe und das Einrücken eliminieren, indem wir einfach schreiben, was die Funktion nach dem -> tun wird:
sayHi = (name) -> return "Hello " + nameDieses kleine Code-Snippet wird in das folgende JavaScript kompiliert:
var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Natürlich war das eine sehr einfache Funktion, aber wie Sie sehen können, haben wir 3 Zeilen Code gespeichert und natürlich könnten wir im JavaScript einfach die Variable so benennen, wie wir die Funktion wie folgt deklarieren:
var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));Die Beispiele, die ich hier gegeben habe, sind, was CoffeeScript kompiliert, und obwohl es in den meisten Fällen einfachere Möglichkeiten gibt, etwas zu tippen, ist das gesamte kompilierte JavaScript gültig und semantisch.
Dies ist nur der Anfang von dem, was CoffeeScript Ihnen geben kann, wenn die Dinge komplexer werden, wird diese kleine Sprache Ihnen eine Menge Hebelwirkung im Vergleich zu JavaScript geben, weniger Code, den Sie schreiben müssen, mehr menschlich lesbaren Code und mehr wartbar , damit Sie ein Jahr später auf eine Website zurückkehren und wissen, was in diesem JavaScript passiert.
Bleiben Sie dran für den zweiten Teil dieser Serie, wo ich Ihnen zeigen werde, wie man CoffeeScript mit jQuery und LocalStorage kombiniert, um eine einfache Kontaktlisten-App zu erstellen.
Haben Sie mit CoffeeScript JavaScript vereinfacht? Welche Teile von CoffeeScript bevorzugen Sie zu Javascript? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Kaffee Bild über Shutterstock.