Í fyrsta hluti í þessari grein um CoffeeScript sást þú helstu möguleika hennar; en við skulum vera heiðarlegur, oftast notum við jQuery bókasafnið til að hjálpa okkur að skrifa JavaScript og það sem ég sýndi þér í fyrsta hluta var bara vanillu JavaScript.
Í þessum hluta munum við taka þátt í CoffeeScript, LocalStorage og jQuery til að búa til einfalda tengiliðastjóra þar sem við getum vistað númer einhvers, nafnið og einnig athugað hvort viðkomandi sé vinur og með hjálp LocalStorage mun þessi tengiliðastjóri vista tengiliðina þína þegar þú endurnýja síðuna þína.
Þú getur séð kynningu á því sem við munum búa til í þessu kynningu sem ég reisti.
Eins og þú sást í kynningu, mun HTML okkar vera formið og einfalt tómt
Þó að þetta eyðublað sé með aðferð og aðgerð munum við loka sjálfgefið aðgerð með JavaScript til að stöðva það að endurhlaða síðuna og stökk þegar hún er lögð fram. Þess í stað munum við bara fylla út númerið sem er óflokkað með því sem er í inntak formsins.
Nú munum við komast inn í bestu hluti þessarar greinar: Að tala um CoffeeScript og jQuery saman, tvö tæki sem voru gerðar til að gera JavaScript okkar þróun einfaldari og afkastamikill.
Við skulum hugsa um hvað við viljum þetta forrit gera í punktum fyrir kóðann:
Nú höfum við allt þetta beint við getum byrjað frá toppnum. Til að bæta við hakkaðum bekknum þurfum við að leita að smelli og síðan skipta um bekknum í hverjum flokki, höfum við þegar séð hvernig á að búa til aðgerðir í CoffeeScript í hluta 1, svo:
$('#friend').click -> $(this).toggleClass 'checked'Það næsta sem við þurfum að er að fylgjast með því að smella á senda hnappinn og geyma sumar breytur sem við munum þurfa frekar niður á veginum:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()Í þessu skrefi höfum við skilgreint virkni okkar og breytur sem við þurfum seinna, ul-breytan heldur óreglulega listann sem mun innihalda öll nöfn og númer og næstu tveir mun geyma það sem við tökum á inntak.
Þetta er sá hluti þar sem við tökum öll gildin sem við höfum og undirbúa listalista fyrir hvert númer sem við höfum. Mundu að við viljum stilla hlutina svolítið öðruvísi ef tengiliðurinn er vinur, svo við munum athuga flokkinn í reitnum og bæta við mismunandi flokkum í listalistann okkar í samræmi við það. Fyrir það munum við nota einfaldan ef yfirlýsingu eins og lýst er í hluta 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Grunnurinn á appnum okkar er tilbúinn en ef þú hleður niður síðunni verður þú að sjá að öll tölurnar eru farin, þannig að við þurfum að bæta við innihaldi tölurnar í LocalStorage og við munum kalla það tengiliði:
localStorage.setItem 'contacts', $(ul).html()Það sem við erum að gera er að nefna það sem við viljum bjarga fyrst, og síðan eftir kommu lýsum við gildi þess að vera vistað. Í þessu tilfelli munum við vista innihald óskráða listans.
Með þessari línu gert höfum við öll tölurnar og nöfnin í LocalStorage svo við skulum bæta endanlegri snertingu við aðgerðina með því að endurstilla eyðublaðið og þá fara aftur á rangan hátt til að tryggja að síðunni endurnýjar ekki:
$("form")[0].reset()return false Aðgerðin er nú lokið og allt sem við þurfum að gera núna er að athuga hvort við höfum eitthvað í LocalStorage með nafni tengiliða og ef við gerum þurfum við bara að setja það á síðunni:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Allt sem við erum að gera er að athuga og síðan setja innihald þessarar hlutar á síðunni. Með þessari síðustu snerta er litla snertifræðingurinn okkar búinn og fullur CoffeeScript kóða sem notaður 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 ef við keyrum þennan kóða í gegnum þýðandann endarðu með eftirfarandi 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 + ' ');} Annar {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} LocalStorage.setItem ('tengiliðir', $ (ul) .html ()); $ ("form") [0] .reset (); return false;}); ef (localStorage.getItem ('tengiliðir')) {$('#numbers').html(localStorage.getItem('contacts'));}Bera saman bæði við getum séð að CoffeeScript hefur 587 orð og 14 línur en Javascript hefur 662 orð og 21 línur og ef við bera saman læsileika getum við séð að CoffeeScript er verulega læsilegra en JavaScript samsvarandi. Ef í þessari tegund af einföldu forriti getur CoffeeScript vistað 7 línur af kóða ímyndaðu þér hversu mikið það myndi spara í fullri blásið forrit!
Ég vona að þessi grein hafi gefið þér betri hugmynd um CoffeeScript og hvernig það getur bætt daglegt JavaScript kóða þinn. Kóðinn sem skrifaður er í þessari grein er ekki ætlað að vera hreinasta eða auðveldasta JavaScript, heldur var ætlað að sýna með því að nota CoffeeScript. Ég vona nú að þú getir séð hversu öflugt það er með jQuery og þú ert að íhuga að nota þetta frábæra litla tungumál í daglegu erfðaskrá þinni því það mun örugglega spara þér tíma til að slá inn.
Notar þú CoffeeScript? Hversu gagnlegt finnur þú það daglega? Láttu okkur vita í athugasemdunum.