Im Der erste Teil In diesem Artikel über CoffeeScript hast du seine grundlegenden Fähigkeiten gesehen. Aber seien wir ehrlich, die meiste Zeit benutzen wir die jQuery-Bibliothek, um uns beim Schreiben von JavaScript zu helfen und was ich Ihnen im ersten Teil gezeigt habe, war nur JavaScript.
In diesem Teil werden wir CoffeeScript, LocalStorage und jQuery beitreten, um einen einfachen Kontaktmanager zu erstellen, in dem wir die Nummer, den Namen und auch prüfen können, ob diese Person ein Freund ist. Mit Hilfe von LocalStorage speichert dieser Kontaktmanager Ihre Kontakte Aktualisieren Sie Ihre Seite.
Sie können die Demo sehen, was wir hier erstellen werden Demo habe ich gebaut.
Wie Sie in der Demo gesehen haben, wird unser HTML das Formular und ein einfaches leeres sein
Obwohl dieses Formular eine Methode und eine Aktion enthält, werden wir die Standardaktion später mit JavaScript blockieren, um zu verhindern, dass es die Seite neu lädt und springt, wenn es gesendet wird. Stattdessen füllen wir einfach die ungeordnete Liste mit den Eingaben des Formulars.
Jetzt werden wir uns mit dem besten Teil dieses Artikels beschäftigen: zwei gemeinsame Tools für CoffeeScript und jQuery, um unsere JavaScript-Entwicklung einfacher und produktiver zu machen.
Lass uns darüber nachdenken, was diese App in den folgenden Punkten vor der Codierung machen soll:
Jetzt haben wir alles klar und können von oben anfangen. Um die überprüfte Klasse hinzuzufügen , müssen wir nach einem Klick suchen und dann die Klasse für jede einzelne Klasse umschalten. Wir haben bereits gesehen, wie man in CoffeeScript in Teil 1 Funktionen erstellt:
$('#friend').click -> $(this).toggleClass 'checked'Als nächstes müssen wir einen Klick auf den Submit-Button prüfen und einige Variablen speichern, die wir weiter unten benötigen:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()In diesem Schritt haben wir unsere Funktion und die Variablen, die wir später brauchen, definiert. Die ul-Variable enthält die ungeordnete Liste, die alle Namen und Zahlen enthält, und die nächsten beiden speichern, was auch immer wir an den Eingaben eingeben.
Dies ist der Teil, in dem wir alle Werte, die wir haben, greifen und ein Listenelement für jede Zahl, die wir haben, voranstellen. Denken Sie daran, dass wir die Dinge ein wenig anders stylen möchten, wenn der Kontakt ein Freund ist. Daher prüfen wir die Klasse des Kontrollkästchens und fügen unseren Listenelementen entsprechend unterschiedliche Klassen hinzu. Dazu verwenden wir eine einfache if- Anweisung wie in Teil 1 beschrieben:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Die Basis unserer App ist bereit, aber wenn Sie die Seite neu laden, werden Sie sehen, dass alle Zahlen weg sind, also müssen wir den Inhalt der Nummern zu LocalStorage hinzufügen und wir werden sie Kontakte nennen:
localStorage.setItem 'contacts', $(ul).html()Was wir tun, ist die Benennung, was wir zuerst speichern wollen, und nach dem Komma geben wir den Wert an, der gespeichert werden soll. In diesem Fall speichern wir den Inhalt der ungeordneten Liste.
Mit dieser Zeile haben wir alle Zahlen und Namen in LocalStorage, also fügen wir der Funktion den letzten Schliff hinzu, indem wir das Formular zurücksetzen und dann false zurückgeben, um sicherzustellen, dass die Seite nicht neu geladen wird:
$("form")[0].reset()return false Die Funktion ist nun abgeschlossen und wir müssen nur noch überprüfen, ob wir etwas in LocalStorage mit dem Namen der Kontakte haben, und wenn wir das tun, müssen wir das nur auf der Seite platzieren:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Alles, was wir tun, ist zu überprüfen und dann den Inhalt dieses Elements auf der Seite zu platzieren. Mit dieser letzten Berührung ist unser kleiner Kontaktmanager fertig und der vollständige CoffeeScript-Code war:
$('#friend').click -> $(this).toggleClass 'checked'$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'localStorage.setItem 'contacts', $(ul).html()$("form")[0].reset();return falseif localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Und wenn wir diesen Code über den Compiler ausführen, erhalten wir folgendes JavaScript:
$('#friend').click(function() {return $(this).toggleClass('checked');});$('#submit').click(function() {var name, number, ul;ul = $('#numbers');number = $('#number').val();name = $('#name').val();if ($('#friend').hasClass('checked')) {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} sonst {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('Kontakte', $ (ul) .html ()); $ ("Formular") [0] .reset (); return false;}); if (localStorage.getItem ('Kontakte')) {$('#numbers').html(localStorage.getItem('contacts'));}Vergleichen wir beide, wir können sehen, 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 Sie in dieser Art der einfachen Anwendung CoffeeScript 7 Zeilen Code sparen können, stellen Sie sich vor, wie viel es in der vollen Anwendung sparen würde!
Ich hoffe, dieser Artikel hat Ihnen eine bessere Vorstellung von CoffeeScript gegeben und wie Sie Ihre tägliche JavaScript-Programmierung verbessern können. Der in diesem Artikel geschriebene Code soll kein sauberes oder einfaches JavaScript sein, sondern mit CoffeeScript illustriert werden. Ich hoffe jetzt, dass Sie sehen können, wie mächtig es mit jQuery ist, und Sie überlegen, diese großartige kleine Sprache in Ihrer täglichen Kodierung zu verwenden, weil es Ihnen auf jeden Fall Stunden des Tippens sparen wird.
Benutzt du CoffeeScript? Wie nützlich findest du es täglich? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Kaffee Bild über Shutterstock.