v první část tohoto článku o CoffeeScript, jste viděli jeho základní schopnosti; ale buďme upřímní, nejčastěji používáme knihovnu jQuery, která nám pomůže psát náš JavaScript a to, co jsem vám ukázal v první části, byl jenom javascript JavaScript.
V této části se připojujeme k CoffeeScript, LocalStorage a jQuery a vytvoříme tak jednoduchého správce kontaktů, kde můžeme uložit něčí číslo, jméno a také zkontrolovat, zda je tato osoba přítelem a s pomocí LocalStorage tento správce kontaktů uloží vaše kontakty, obnovte stránku.
Můžete vidět demo toho, co v tom budeme vytvářet demo jsem postavil.
Jak jste viděli v demo, náš HTML bude formulář a jednoduchý prázdný
I když má tato forma metodu a akci, budeme později zablokovat výchozí akci pomocí jazyka JavaScript, aby přestala skutečně znovu načítat stránku a skákat po jejím odeslání. Namísto toho pouze vyplníme seznam neurčených čísel s tím, co je ve vstupních materiálech formuláře.
Nyní se dostaneme do nejlepší části tohoto článku: mluvíme společně o CoffeeScript a jQuery dohromady, dva nástroje, které byly vytvořeny pro zjednodušení a zvýšení produktivity našeho JavaScriptu.
Přemýšleme o tom, co chceme tuto aplikaci udělat v bodech před zaškrtnutím kódu:
Teď už máme všechno, abychom mohli začít od vrcholu. Chcete-li přidat kontrolovanou třídu, musíme zkontrolovat kliknutí a přepnout třídu na každou třídu. Už jsme viděli, jak v části 1 vytvořit funkce v jazyce CoffeeScript, takže:
$('#friend').click -> $(this).toggleClass 'checked'Další věc, kterou potřebujeme, je zkontrolovat kliknutí na tlačítko Odeslat a uložit některé proměnné, které budeme potřebovat dále po silnici:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()V tomto kroku jsme definovali naši funkci a proměnné, které potřebujeme později, ul proměnná obsahuje neřízený seznam, který bude obsahovat všechna jména a čísla, a další dva uloží co zadáme na vstupy.
Toto je část, ve které uchopíme všechny hodnoty, které máme, a nastavíme položku seznamu pro každé číslo, které máme. Nezapomeňte, že chceme věci trochu jinak měnit, pokud je kontakt přítelem, a proto zkontrolujeme třídu zaškrtávacího políčka a odpovídajícím způsobem přidejte do našich položek různé třídy. Pro tento účel použijeme jednoduché příkaz if, jak je popsáno v části 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Základna naší aplikace je připravena, ale pokud znovu načtete stránku, uvidíte, že všechna čísla jsou pryč, takže musíme přidat obsah čísel do LocalStorage a my jej nazveme kontakty:
localStorage.setItem 'contacts', $(ul).html()Co děláme, je pojmenování toho, co chceme nejprve uložit, a potom za čárkou deklarujeme hodnotu, která má být uložena. v tomto případě uložíme obsah neřízeného seznamu.
S touto čárou máme všechny čísla a jména v LocalStorage, takže přidáme poslední změny funkce obnovením formuláře a návratem false, aby se zajistilo, že stránka nebude znovu načten:
$("form")[0].reset()return false Funkce je nyní dokončena a vše, co potřebujeme udělat, je zkontrolovat, jestli máme něco v LocalStorage s názvem kontaktů, a pokud to uděláme, stačí, aby to bylo na stránce:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Jediné, co děláme, je kontrola a umístění obsahu této položky na stránku. S tímto posledním dotykem je náš malý manažer kontaktů hotový a celý použitý kód jazyka CoffeeScript byl:
$('#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'A pokud tento kód spustíme pomocí kompilátoru, skončíme s následujícím jazykem 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 + ' ');} jiný {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacts', $ (ul) .html ()); $ ("formulář") [0] .reset (); {$('#numbers').html(localStorage.getItem('contacts'));}Porovnejme oba vidíme, že CoffeeScript má 587 slov a 14 řádků, zatímco Javascript má 662 slov a 21 řádků, a pokud porovnáme čitelnost, můžeme vidět, že CoffeeScript je podstatně čitelnější než ekvivalent JavaScript. Pokud v tomto typu jednoduché aplikace CoffeeScript můžete ušetřit 7 řádků kódu si představte, kolik to ušetří v plné foukané aplikaci!
Doufám, že tento článek vám dal lepší představu o CoffeeScriptu a jak může zlepšit vaše každodenní kódování v jazyce JavaScript. Kód napsaný v tomto článku není určen k tomu, aby byl nejčistší nebo nejsnadnější JavaScript, spíše byl určen k ilustraci pomocí programu CoffeeScript. Doufám, že nyní můžete vidět, jak moc je to s jQuery a uvažujete o používání tohoto velkého malého jazyka ve svém každodenním kódování, protože to vám určitě ušetří hodiny psaní.
Používáte CoffeeScript? Jak užitečné to považujete za každodenní? Dejte nám vědět v komentářích.