Im ersten Teil dieses Artikels über CoffeeScript haben Sie seine grundlegenden Funktionen gesehen; Aber seien wir ehrlich, die meiste Zeit verwenden wir die jQuery-Bibliothek, um unser JavaScript zu schreiben, und was ich Ihnen im ersten Teil gezeigt habe, war nur Vanilla-JavaScript.
In diesem Teil werden wir CoffeeScript, LocalStorage und jQuery verbinden, um einen einfachen Kontaktmanager zu erstellen, in dem wir die Nummer und den Namen einer Person speichern und auch überprüfen können, ob diese Person ein Freund ist. Mithilfe von LocalStorage speichert dieser Kontaktmanager Ihre Kontakte, wenn Sie Aktualisieren Sie Ihre Seite.
Hier können Sie die Demo dessen sehen, was wir erstellen werden Demo, die ich erstellt habe.
Der HTML
Wie Sie in der Demo gesehen haben, besteht unser HTML aus dem Formular und einem einfachen leeren
- , das wir später mit den Namen und Zahlen füllen:
Obwohl dieses Formular über eine Methode und eine Aktion verfügt, werden wir die Standardaktion später mit JavaScript blockieren, um zu verhindern, dass es die Seite tatsächlich neu lädt und beim Absenden springt. Stattdessen füllen wir einfach die ungeordnete Zahlenliste mit den Eingaben des Formulars.
Das CoffeeScript
Jetzt kommen wir zum besten Teil dieses Artikels: Wir sprechen gemeinsam über CoffeeScript und jQuery, zwei Tools, die entwickelt wurden, um unsere JavaScript-Entwicklung einfacher und produktiver zu machen.
Lassen Sie uns vor dem Codieren in Stichpunkten darüber nachdenken, was diese App tun soll:
- Fügen Sie die Klasse hinzu überprüft wenn das Kontrollkästchen aktiviert ist, und entfernen Sie es, wenn nicht;
- Suchen Sie nach einem Klickereignis auf der Schaltfläche „Senden“;
- Holen Sie sich die Werte der Nummer und des Namens.
- Platzieren Sie diese Werte auf unserer Seite;
- Fügen Sie alle Namen und Nummern zu LocalStorage hinzu.
- löschen Sie alles, was wir in das Formular eingegeben haben;
- das Absenden des Formulars verhindern;
- Lesen und Anzeigen aller in LocalStorage gespeicherten Daten.
Jetzt haben wir das alles geklärt und können von oben beginnen. Um das hinzuzufügen überprüft Klasse müssen wir auf einen Klick prüfen und dann die Klasse für jede einzelne Klasse umschalten. Wir haben bereits in Teil 1 gesehen, wie man Funktionen in CoffeeScript erstellt, also:
$(‘#friend’).click -> $(this).toggleClass ‘checked’
Als nächstes müssen wir prüfen, ob auf die Schaltfläche „Senden“ geklickt wird, und einige Variablen speichern, die wir später benötigen werden:
$(‘#submit’).click -> ul = $(‘#numbers’) number = $(‘#number’).val() name = $(‘#name’).val()
In diesem Schritt haben wir unsere Funktion und die Variablen definiert, die wir später benötigen. Die Variable ul enthält die ungeordnete Liste, die alle Namen und Nummern enthält, und die nächsten beiden speichern alles, was wir in die Eingaben eingeben.
Dies ist der Teil, in dem wir alle Werte, die wir haben, erfassen und jeder Zahl, die wir haben, ein Listenelement voranstellen. Denken Sie daran, dass wir die Dinge etwas anders gestalten möchten, wenn der Kontakt ein Freund ist. Deshalb überprüfen wir die Klasse des Kontrollkästchens und fügen unseren Listenelementen entsprechend verschiedene Klassen hinzu. Dafür verwenden wir ein einfaches Wenn Aussage wie in Teil 1 beschrieben:
if $(‘#friend’).hasClass ‘geprüft’
$(ul).prepend ‘
Nummer: ‘ + number + ‘
‘
anders
$(ul).prepend ‘
Nummer: ‘ + Nummer + ‘
‘
Die Basis unserer App ist fertig, aber wenn Sie die Seite neu laden, werden Sie feststellen, dass alle Nummern verschwunden sind. Daher müssen wir den Inhalt der Nummern zu LocalStorage hinzufügen und nennen ihn Kontakte:
localStorage.setItem ‘Kontakte’, $(ul).html()
Wir benennen zunächst, was wir speichern möchten, und deklarieren dann nach dem Komma den zu speichernden Wert. In diesem Fall speichern wir den Inhalt der ungeordneten Liste.
Nachdem diese Zeile fertig ist, haben wir alle Nummern und Namen in LocalStorage, also geben wir der Funktion den letzten Schliff, indem wir das Formular zurücksetzen und dann zurückkehren FALSCH Um sicherzustellen, dass die Seite nicht neu geladen wird:
$(“form”)[0].reset() gibt false zurück
Die Funktion ist nun abgeschlossen und wir müssen jetzt nur noch prüfen, ob wir in LocalStorage etwas mit dem Namen haben Kontakte Und wenn ja, müssen wir das nur auf der Seite platzieren:
if localStorage.getItem ‘contacts’ $(‘#numbers’).html localStorage.getItem ‘contacts’
Wir überprüfen lediglich den Inhalt dieses Elements und platzieren ihn dann auf der Seite. Mit dieser letzten Berührung ist unser kleiner Kontaktmanager fertig und der vollständige verwendete CoffeeScript-Code war:
$(‘#friend’).click -> $(this).toggleClass ‘checked’
$(‘#submit’).click ->
ul = $(‘#Zahlen’)
Zahl = $(‘#Zahl’).val()
name = $(‘#name’).val()
if $(‘#friend’).hasClass ‘geprüft’
$(ul).prepend ‘
Nummer: ‘ + number + ‘
‘
anders
$(ul).prepend ‘
Nummer: ‘ + Nummer + ‘
‘
localStorage.setItem ‘Kontakte’, $(ul).html()
$(“form”)[0].zurücksetzen();
falsch zurückgeben
wenn localStorage.getItem ‘Kontakte’
$(‘#numbers’).html localStorage.getItem ‘contacts’
Und wenn wir diesen Code durch den Compiler ausführen, erhalten wir das folgende JavaScript:
$(‘#friend’).click(function() {
return $(this).toggleClass(‘checked’);
});
$(‘#submit’).click(function() {
Var-Name, Nummer, Ul;
ul = $(‘#Zahlen’);
Zahl = $(‘#Zahl’).val();
name = $(‘#name’).val();
if ($(‘#friend’).hasClass(‘checked’)) {
$(ul).prepend(‘
Nummer: ‘ + number + ‘
‘);
} anders {
$(ul).prepend(‘
Nummer: ‘ + Nummer + ‘
‘);
}
localStorage.setItem(‘contacts’, $(ul).html());
$(“form”)[0].zurücksetzen();
falsch zurückgeben;
});
if (localStorage.getItem(‘contacts’)) {
$(‘#numbers’).html(localStorage.getItem(‘contacts’));
}
Wenn wir beide vergleichen, sehen wir, dass das CoffeeScript 587 Wörter und 14 Zeilen hat, während das Javascript 662 Wörter und 21 Zeilen hat, und wenn wir die Lesbarkeit vergleichen, können wir sehen, dass das CoffeeScript wesentlich besser lesbar ist als das JavaScript-Äquivalent. Wenn CoffeeScript Ihnen in einer solchen einfachen Anwendung 7 Zeilen Code einsparen kann, stellen Sie sich vor, wie viel es in einer vollständigen Anwendung einsparen würde!
Abschluss
Ich hoffe, dieser Artikel hat Ihnen eine bessere Vorstellung von CoffeeScript vermittelt und zeigt, wie es Ihre tägliche JavaScript-Codierung verbessern kann. Der in diesem Artikel geschriebene Code soll nicht das sauberste oder einfachste JavaScript sein, sondern vielmehr die Verwendung von CoffeeScript veranschaulichen. Ich hoffe, dass Sie jetzt sehen können, wie leistungsstark jQuery ist, und dass Sie darüber nachdenken, diese tolle kleine Sprache in Ihrer täglichen Codierung zu verwenden, denn sie wird Ihnen auf jeden Fall stundenlanges Tippen ersparen.
Benutzen Sie CoffeeScript? Wie nützlich finden Sie es im Alltag? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Kaffeebild über Shutterstock.
