I den første delen i denne artikkelen om CoffeeScript, så du sine grunnleggende evner; men la oss være ærlige, mesteparten av tiden bruker vi jQuery-biblioteket til å hjelpe oss med å skrive vår JavaScript og det jeg viste deg i første del var bare vanilla JavaScript.
I denne delen vil vi bli med CoffeeScript, LocalStorage og jQuery for å lage en enkel kontaktadministrator der vi kan lagre noens nummer, navn og også sjekke om personen er en venn, og ved hjelp av LocalStorage lagrer denne kontaktbehandleren dine kontakter når du Oppdater siden din.
Du kan se demonstrasjonen av hva vi skal skape i dette demo jeg bygget.
Som du så i demonstrasjonen, vil vår HTML være skjemaet og en enkel tom
Selv om dette skjemaet har en metode og handling, vil vi senere blokkere standardhandlingen med JavaScript for å stoppe det, og laster faktisk opp siden og hopper når den sendes inn. I stedet fyller vi bare tallene uordnet liste med hva som er i skjemaets innganger.
Nå kommer vi inn i den beste delen av denne artikkelen: snakker om CoffeeScript og jQuery sammen, to verktøy som ble laget for å gjøre JavaScript-utviklingen enklere og mer produktiv.
La oss tenke på hva vi vil at denne appen skal gjøre i punktpunkter før kodingen:
Nå har vi alt dette rett, vi kan starte fra toppen. For å legge til den merkede klassen må vi sjekke etter et klikk og deretter bytte klassen på hver enkelt klasse, vi har allerede sett hvordan vi bygger funksjoner i CoffeeScript i del 1, så:
$('#friend').click -> $(this).toggleClass 'checked'Den neste tingen vi trenger er å sjekke for et klikk på send-knappen og lagre noen variabler som vi vil trenge lenger nedover veien:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()I dette trinnet har vi definert vår funksjon, og variablene vi trenger senere, inneholder ul-variabelen den uordnede listen som vil inneholde alle navnene og tallene, og de neste to lagrer det vi skriver på inngangene.
Dette er den delen der vi tar tak i alle verdiene vi har, og legger ut et listeelement for hvert nummer vi har. Husk at vi vil style ting litt annerledes hvis kontakten er en venn, så vi vil sjekke klassen i avmerkingsboksen og legge til forskjellige klasser til våre listeposter tilsvarende. For det vil vi bruke en enkel if- setning som beskrevet i del 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Basen på appen vår er klar, men hvis du oppdaterer siden, ser du at alle tallene er borte, så vi må legge til innholdet i tallene til LocalStorage, og vi vil ringe det til kontakter:
localStorage.setItem 'contacts', $(ul).html()Det vi gjør er å navngi det vi vil lagre først, og deretter etter kommaen erklærer vi verdien som skal lagres. I dette tilfellet lagrer vi innholdet i den uordnede listen.
Med denne linjen gjort, har vi alle tallene og navnene i LocalStorage, så la oss legge til de siste detaljene i funksjonen ved å tilbakestille skjemaet og deretter returnere falsk for å sikre at siden ikke lastes opp:
$("form")[0].reset()return false Funksjonen er nå fullført, og alt vi trenger å gjøre nå er å sjekke om vi har noe i LocalStorage med navn på kontakter, og hvis vi gjør det, må vi bare plassere det på siden:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Alt vi gjør, er å sjekke og deretter plassere innholdet på det aktuelle elementet på siden. Med denne siste berøringen er vår lille kontaktbehandler ferdig, og den fulle CoffeeScript-koden som ble brukt 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'Og hvis vi kjører denne koden gjennom 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 + ' ');} ellers {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('kontakter', $ (ul) .html ()), $ ("form") [0] .reset (); return false;}); hvis (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}Sammenligne 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 lesbarhet, kan vi se at CoffeeScript er vesentlig mer leselig enn JavaScript-ekvivalenten. Hvis i denne typen enkel applikasjon kan CoffeeScript lagre 7 linjer med kode, forestill deg hvor mye det ville spare i fullstendig blåst applikasjon!
Jeg håper denne artikkelen har gitt deg en bedre ide om CoffeeScript, og hvordan det kan forbedre din daglige JavaScript-koding. Koden som er skrevet i denne artikkelen, er ikke ment å være reneste eller enkleste JavaScript, men det var ment å illustrere ved hjelp av CoffeeScript. Jeg håper nå at du kan se hvor kraftig det er med jQuery, og du vurderer å bruke dette flotte lille språket i din daglige koding, fordi det vil mest definitivt spare deg for å skrive timer.
Bruker du CoffeeScript? Hvor nyttig finner du det daglige? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, kaffe bilde via Shutterstock.