I Den första delen i den här artikeln om CoffeeScript såg du dess grundläggande förmåga; men låt oss vara ärliga, mestadels använder vi jQuery-biblioteket för att hjälpa oss att skriva vår JavaScript och det jag visade dig i den första delen var bara vanilj JavaScript.
I den här delen kommer vi att gå med i CoffeeScript, LocalStorage och jQuery för att skapa en enkel kontakthanterare där vi kan spara någons nummer, namn och även kontrollera om personen är en vän och med hjälp av LocalStorage kommer den här kontakthanteraren att spara dina kontakter när du uppdatera din sida.
Du kan se demo av vad vi ska skapa i detta demo jag byggt.
Som du såg i demoen blir vår HTML form och en enkel tom
Även om det här formuläret har en metod och åtgärd kommer vi senare att blockera standardåtgärden med JavaScript för att stoppa att det faktiskt laddar sidan och hoppar när den skickas in. I stället fyller vi bara numreringen oorderad lista med vad som finns i formulärets ingångar.
Nu kommer vi att komma in i den bästa delen av den här artikeln: prata om CoffeeScript och jQuery tillsammans, två verktyg som gjordes för att göra vår JavaScript-utveckling enklare och mer produktiv.
Låt oss tänka på vad vi vill att den här appen ska göra i punktpunkter före kodningen:
Nu har vi allt detta rakt vi kan börja från toppen. För att lägga till den markerade klassen måste vi söka efter ett klick och sedan växla klassen i varje enskild klass, vi har redan sett hur man konstruerar funktioner i CoffeeScript i del 1, så:
$('#friend').click -> $(this).toggleClass 'checked'Nästa sak vi behöver är att kontrollera ett klick på Skicka-knappen och lagra några variabler som vi kommer att behöva längre ner på vägen:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()I detta steg har vi definierat vår funktion och variablerna behöver vi senare, ul-variabeln innehåller den oordnade listan som innehåller alla namn och nummer och de två följande kommer att lagra allt vad vi skriver på ingångarna.
Det här är den del där vi tar alla värden vi har och lägger ut en listobjekt för varje nummer vi har. Kom ihåg att vi vill stryka saker lite annorlunda om kontakten är en vän, så vi kommer att kolla klassen i kryssrutan och lägga till olika klasser till våra listobjekt i enlighet därmed. För det ska vi använda ett enkelt if- uttalande som beskrivet i del 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Basen på vår app är klar men om du laddar om sidan ser du att alla siffror är borta, så vi måste lägga till innehållet i numren till LocalStorage och vi ringer det till kontakter:
localStorage.setItem 'contacts', $(ul).html()Vad vi gör är att namngöra vad vi vill spara först, och sedan efter kommaen förklarar vi värdet som ska sparas. i det här fallet sparar vi innehållet i den oordnade listan.
Med den här raden gjort har vi alla siffror och namn i LocalStorage så låt oss lägga till sista handen vid funktionen genom att återställa formuläret och sedan returnera falskt för att säkerställa att sidan inte laddas om:
$("form")[0].reset()return false Funktionen är nu klar och allt vi behöver göra nu är att kontrollera om vi har något i LocalStorage med namnet på kontakter och om vi behöver behöver vi bara placera det på sidan:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Allt vi gör är att kolla och sedan placera innehållet på den artikeln på sidan. Med den här sista kontakten är vår lilla kontakthanterare klar och den fullständiga CoffeeScript-koden som användes var:
$('#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'Och om vi kör denna kod via kompilatorn hamnar vi med följande 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 + ' ');} annan {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} LocalStorage.setItem ('contacts', $ (ul) .html ()), $ ("form") [0] .reset (); return false;}); om (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}Jämför båda vi kan se att CoffeeScript har 587 ord och 14 linjer medan Javascript har 662 ord och 21 linjer, och om vi jämför läsbarhet kan vi se att CoffeeScript är väsentligt mer läslig än JavaScript-ekvivalenten. Om i denna typ av enkel applikation kan CoffeeScript spara 7 linjer kod föreställa hur mycket det skulle spara i fullblåst applikation!
Jag hoppas att den här artikeln har gett dig en bättre uppfattning om CoffeeScript och hur det kan förbättra din dagliga JavaScript-kodning. Koden som skrivs i den här artikeln är inte avsedd att vara renaste eller enklaste JavaScript, men den var avsedd att illustrera med hjälp av CoffeeScript. Jag hoppas nu att du kan se hur kraftfull det är med jQuery och du överväger att använda det här lilla språket i din dagliga kodning, eftersom det definitivt kommer att spara dig timmar att skriva.
Använder du CoffeeScript? Hur användbart finner du det dagliga? Låt oss veta i kommentarerna.