In la prima parte di questo articolo su CoffeeScript, hai visto le sue capacità di base; ma siamo onesti, la maggior parte delle volte usiamo la libreria jQuery per aiutarci a scrivere il nostro JavaScript e ciò che ti ho mostrato nella prima parte era solo JavaScript.
In questa parte ci uniremo a CoffeeScript, LocalStorage e jQuery per creare un semplice gestore di contatti in cui possiamo salvare il numero, il nome e anche controllare se quella persona è un amico, e con l'aiuto di LocalStorage questo gestore contatti salverà i tuoi contatti quando aggiorna la tua pagina.
Puoi vedere la demo di ciò che creeremo in questo demo che ho costruito.
Come hai visto nella demo, il nostro HTML sarà il modulo e un semplice vuoto
Anche se questo modulo ha un metodo e un'azione, in seguito bloccheremo l'azione predefinita con JavaScript per impedirgli di ricaricare la pagina e saltare quando viene inviata. Piuttosto, riempiremo semplicemente la lista non ordinata di numeri con ciò che è negli input della forma.
Ora entreremo nella parte migliore di questo articolo: parlando di CoffeeScript e jQuery insieme, due strumenti che sono stati creati per rendere il nostro sviluppo JavaScript più semplice e produttivo.
Pensiamo a cosa vogliamo che questa app faccia nei punti elenco prima della codifica:
Ora abbiamo tutto questo dritto possiamo iniziare dall'alto. Per aggiungere la classe selezionata dobbiamo controllare un clic e quindi attivare la classe su ogni singola classe, abbiamo già visto come costruire le funzioni in CoffeeScript nella parte 1, quindi:
$('#friend').click -> $(this).toggleClass 'checked'La prossima cosa che dobbiamo fare è controllare un clic sul pulsante di invio e memorizzare alcune variabili che avremo bisogno in fondo alla strada:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()In questo passo abbiamo definito la nostra funzione e le variabili di cui abbiamo bisogno in seguito, la variabile ul contiene la lista non ordinata che conterrà tutti i nomi e i numeri e le due successive memorizzerà tutto ciò che scriviamo sugli input.
Questa è la parte in cui prendiamo tutti i valori che abbiamo e anteponiamo una voce di lista per ogni numero che abbiamo. Ricorda che vogliamo modellare le cose in modo un po 'diverso se il contatto è un amico, quindi controlleremo la classe della casella di controllo e aggiungeremo di conseguenza classi diverse alle voci della nostra lista. Per questo useremo un'istruzione if semplice come descritto nella parte 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'La base della nostra app è pronta ma se ricarichi la pagina vedrai che tutti i numeri sono spariti, quindi dobbiamo aggiungere il contenuto dei numeri a LocalStorage e noi lo chiameremo contatti:
localStorage.setItem 'contacts', $(ul).html()Quello che stiamo facendo è nominare ciò che vogliamo salvare prima, e poi dopo la virgola dichiariamo il valore da salvare. in questo caso salveremo i contenuti della lista non ordinata.
Con questa linea, abbiamo tutti i numeri e i nomi in LocalStorage, quindi aggiungiamo i tocchi finali alla funzione reimpostando il modulo e quindi restituendo false per garantire che la pagina non venga ricaricata:
$("form")[0].reset()return false La funzione è ora completa e tutto ciò che dobbiamo fare ora è controllare se abbiamo qualcosa in LocalStorage con il nome dei contatti e se lo facciamo dobbiamo solo metterlo sulla pagina:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Tutto quello che stiamo facendo è controllare e quindi posizionare il contenuto di quell'elemento nella pagina. Con questo ultimo tocco il nostro piccolo gestore di contatti è pronto e il codice completo di CoffeeScript utilizzato è stato:
$('#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'E se eseguiamo questo codice attraverso il compilatore finiamo con il seguente codice 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 + ' ');} altro {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacts', $ (ul) .html ()); $ ("form") [0] .reset (); return false;}); if (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}Confronta entrambi possiamo vedere che il CoffeeScript ha 587 parole e 14 linee mentre quello di Javascript ha 662 parole e 21 linee, e se confrontiamo la leggibilità possiamo vedere che il CoffeeScript è sostanzialmente più leggibile rispetto all'equivalente JavaScript. Se in questo tipo di applicazione semplice CoffeeScript può farti risparmiare 7 righe di codice, immagina quanto potrebbe risparmiare in piena applicazione!
Spero che questo articolo ti abbia dato un'idea migliore di CoffeeScript e di come possa migliorare la codifica JavaScript quotidiana. Il codice scritto in questo articolo non è pensato per essere il più pulito o il più semplice JavaScript, ma è stato progettato per illustrare l'uso di CoffeeScript. Ora spero che tu possa vedere quanto sia potente con jQuery e consideri di utilizzare questo piccolo e grande linguaggio nella tua codifica quotidiana perché ti farà sicuramente risparmiare ore di digitazione.
Usi CoffeeScript? Quanto ti sembra utile giorno per giorno? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine del caffè via Shutterstock.