I den første del i denne artikel om CoffeeScript, så du dets grundlæggende evner; men lad os være ærlige, det meste af tiden bruger vi jQuery biblioteket til at hjælpe os med at skrive vores JavaScript, og det jeg viste dig i første del var bare vanilla JavaScript.
I denne del deltager vi i CoffeeScript, LocalStorage og jQuery for at oprette en simpel kontaktadministrator, hvor vi kan gemme en persons nummer, navn og også kontrollere, om personen er en ven, og ved hjælp af LocalStorage gemmer kontakthåndteren dine kontakter, når du Opdater din side.
Du kan se demoen af, hvad vi vil skabe i dette demo jeg bygget.
Som du så i demoen, bliver vores HTML form og en simpel tom
Selv om denne formular har en metode og handling, vil vi senere blokere standardhandlingen med JavaScript for at stoppe det ved at genindlæse siden og hoppe, når den indsendes. I stedet vil vi blot udfylde tallene uordnet liste med, hvad der er i formularens input.
Nu kommer vi ind i den bedste del af denne artikel: Taler om CoffeeScript og jQuery sammen, to værktøjer, der blev lavet for at gøre vores JavaScript-udvikling enklere og mere produktiv.
Lad os tænke over, hvad vi vil have denne app at gøre i punktpunkter før kodningen:
Nu har vi alt dette lige, vi kan starte fra toppen. For at tilføje den markerede klasse skal vi kontrollere et klik og derefter skifte klasse på hver enkelt klasse. Vi har allerede set hvordan man konstruerer funktioner i CoffeeScript i del 1, så:
$('#friend').click -> $(this).toggleClass 'checked'Den næste ting, vi skal bruge, er at kontrollere et klik på knappen Submit og gemme nogle variabler, som vi vil have brug for længere nede ad vejen:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()I dette trin har vi defineret vores funktion, og de variabler, vi har brug for senere, indeholder ul-variablen den uordnede liste, der indeholder alle navne og numre, og de næste to gemmer, hvad vi skriver på indgange.
Dette er den del, hvor vi tager fat på alle de værdier, vi har, og forpligter en liste over hvert nummer, vi har. Husk, at vi vil style ting lidt anderledes, hvis kontakten er en ven, så vi vil kontrollere klassen i afkrydsningsfeltet og tilføje forskellige klasser til vores listemner i overensstemmelse hermed. For det vil vi bruge en simpel if- sætning som beskrevet i del 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Basen på vores app er klar, men hvis du genindlæser siden, vil du se, at alle numrene er væk, så vi skal tilføje indholdet af numrene til LocalStorage, og vi kalder det kontakter:
localStorage.setItem 'contacts', $(ul).html()Hvad vi laver er at navngive det, vi vil gemme først, og derefter efter kommaen erklærer vi værdien, der skal gemmes. i dette tilfælde gemmer vi indholdet af den uordnede liste.
Med denne linje udført, har vi alle numre og navne i LocalStorage så lad os tilføje de sidste ting til funktionen ved at nulstille formularen og derefter returnere falsk for at sikre, at siden ikke genindlæses:
$("form")[0].reset()return false Funktionen er nu færdig, og alt, hvad vi skal gøre nu, er, om vi har noget i LocalStorage med navnet på kontakter, og hvis vi gør det, skal vi bare placere det på siden:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Alt, hvad vi laver, er at kontrollere og derefter placere indholdet af det pågældende emne på siden. Med denne sidste berøring er vores lille kontakt manager færdig, og den fulde CoffeeScript-kode blev brugt:
$('#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'Og hvis vi kører denne kode gennem kompilatoren, slutter vi med følgende 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 + ' ');} andet {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacts', $ (ul) .html ()) $ ("formular") [0] .reset (); return false;}); hvis (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}Sammenlign begge vi kan se, at CoffeeScript har 587 ord og 14 linjer, mens Javascript-en har 662 ord og 21 linjer, og hvis vi sammenligner læsbarhed, kan vi se, at CoffeeScript er væsentlig mere læselig end JavaScript-ækvivalenten. Hvis i denne type simpel applikation CoffeeScript kan spare 7 linjer kode forestille sig, hvor meget det ville spare i fuld blæst applikation!
Jeg håber, at denne artikel har givet dig en bedre ide om CoffeeScript, og hvordan det kan forbedre din daglige JavaScript-kodning. Koden, der er skrevet i denne artikel, er ikke beregnet til at være reneste eller nemmeste JavaScript, men det var snarere meningen at illustrere ved hjælp af CoffeeScript. Jeg håber nu, at du kan se, hvor kraftig det er med jQuery, og du overvejer at bruge dette flotte lille sprog i din daglige kodning, fordi det helt sikkert vil spare dig timers skrivning.
Bruger du CoffeeScript? Hvor nyttigt finder du det dagligt? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, kaffe billede via Shutterstock.