Sisään ensimmäinen osa tämän artikkelin aiheesta KahsScript, näit sen perusominaisuudet; mutta olkaamme rehellisiä, useimmiten käytämme jQuery-kirjastoa, jotta voimme kirjoittaa JavaScript-koodimme ja mitä näytin ensimmäisessä osassa oli vain vanilla JavaScript.
Tässä osassa yhdistämme CoffeeScript, LocalStorage ja jQuery luomaan yksinkertaisen yhteyshenkilön, jolla voimme säästää jonkun numeroa, nimeä ja myös tarkistaa, onko kyseinen henkilö ystävä, ja paikallisen toimiston avulla tämä yhteyshenkilö tallettaa yhteystiedot, kun päivitä sivu.
Näet demon siitä, mitä luomme tässä demo rakensin.
Kuten näimme demossa, HTML-koodi on lomake ja yksinkertainen tyhjä
Vaikka tällä lomakkeella on menetelmä ja toiminta, voimme myöhemmin estää oletustyön JavaScriptin avulla, jotta se ei enää lataa sivua ja hyppää, kun se lähetetään. Sen sijaan me vain täytämme numerot järjestämättömät luettelon mitä on muodossa panokset.
Nyt pääsemme parhaan osan tästä artikkelista: puhumme KahsScript ja jQuery yhdessä, kaksi työkalua, jotka on tehty JavaScript-kehityksen yksinkertaistamiseksi ja tuottavuudeksi.
Ajattelemme, mitä haluamme tämän sovelluksen tekemistä bullet-pisteissä ennen koodausta:
Nyt meillä on kaikki tämä suora, voimme aloittaa ylhäältä. Jos haluat lisätä valitun luokan, meidän on tarkistettava klikkaus ja siirrettävä luokka jokaiselle yksittäiselle luokalle. Olemme jo nähneet, miten rakennetaan toimintoja kahvikirjoituksessa osassa 1, joten:
$('#friend').click -> $(this).toggleClass 'checked'Seuraavaksi meidän on tarkistettava napsautus lähetyspainikkeella ja tallennettava joitain muuttujia, joita tarvitsemme edelleen tiellä:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()Tässä vaiheessa olemme määrittäneet toimintamme ja muuttujat, joita me tarvitsemme myöhemmin, ul-muuttujalla on järjestämättömät luettelot, jotka sisältävät kaikki nimet ja numerot, ja seuraavat kaksi tallentavat mitä kirjoitamme tuloihin.
Tämä on osa, jossa me tarttumme kaikkiin arvoihimme ja esittelemme listan kohteen kutakin numeroamme varten. Muista, että haluamme muotoilla asioita hieman eri tavalla, jos yhteystieto on ystävä, joten tarkistamme valintaruudun luokat ja lisäämme luokkiimme luokkiimme vastaavasti. Tästä syystä käytämme yksinkertaista lausetta, joka on kuvattu osassa 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Sovelluksen pohja on valmis, mutta jos lataat sivun uudelleen, näet, että kaikki numerot ovat kadonneet, joten meidän on lisättävä numeroiden sisältö LocalStorageen ja kutsumme sen yhteystietoiksi:
localStorage.setItem 'contacts', $(ul).html()Se, mitä me teemme, on nimeä mitä haluamme säästää ensin ja sitten pilkulla ilmoitamme, että arvo tallennetaan. tässä tapauksessa tallennamme järjestämättömän luettelon sisällön.
Kun tämä rivi on tehty, meillä on kaikki numerot ja nimet LocalStorage: ssä, joten lisätään lopullinen kosketus funktioon nollaamalla lomake ja palauttamalla sitten väärä varmistaaksesi, että sivu ei lataudu uudelleen:
$("form")[0].reset()return false Toiminto on nyt täydellinen, ja kaikki, mitä tarvitsemme nyt, on tarkistaa, onko meillä jotain LocalStorage-nimistä yhteyshenkilöitä ja jos tarvitsemme, tarvitsemme sen vain sijoittamalla sivulle:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Kaikki, mitä teemme, on tarkistaa ja sijoittaa kyseisen kohteen sisältö sivulle. Tämän viimeisen kontaktin avulla pieni kontaktipäällikkö on valmis ja täydellinen kahvikoodi koodi käytetty:
$('#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'Ja jos suoritamme koodin kääntäjän kautta, päädymme seuraaviin 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 + ' ');} muu {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacts', $ (ul) .html ()); $ ("lomake") [0] .reset (); return false;}), jos (localStorage.getItem {$('#numbers').html(localStorage.getItem('contacts'));}Vertaa molempia voimme nähdä, että CoffeeScript on 587 sanaa ja 14 riviä, kun Javascriptilla on 662 sanaa ja 21 riviä, ja jos verrataan luettavuutta, voimme nähdä, että CoffeeScript on huomattavasti luettavissa kuin JavaScript-ekvivalentti. Jos tämäntyyppisessä yksinkertaisessa sovelluksessa CoffeeScript voi säästää 7 riviä koodia kuvitella, kuinka paljon se säästää täysimittaisessa sovelluksessa!
Toivottavasti tämä artikkeli on antanut sinulle paremman käsityksen CoffeeScriptista ja siitä, miten se voi parantaa päivittäistä JavaScript-koodausta. Tässä artikkelissa kirjoitetun koodin ei ole tarkoitus olla puhtain tai helpoin JavaScript, vaan sen tarkoitus oli havainnollistaa käyttämällä CoffeeScript-ohjelmaa. Toivon nyt, että näet, kuinka tehokas jQuery on, ja harkitset tämän hienon kielen käyttämistä päivittäisessä koodauksessa, koska se varmasti säästää tuntimäärityksiä.
Käytätkö CoffeeScript? Kuinka hyödyllistä pidät sen päivittäisenä? Kerro meille kommentit.