W pierwszej części artykułu o CoffeeScript przedstawiliśmy jego podstawowe możliwości. Bądźmy jednak szczerzy, najczęściej używamy biblioteki jQuery, aby pisać JavaScript, a to, co pokazałem w pierwszej części, to po prostu zwykły JavaScript.
W tej części połączymy CoffeeScript, LocalStorage i jQuery, aby stworzyć prosty menedżer kontaktów, w którym będziemy mogli zapisać czyjś numer telefonu, imię, a także sprawdzić, czy dana osoba jest znajomym. Dzięki LocalStorage ten menedżer kontaktów zapisze Twoje kontakty po odświeżeniu strony.
Możesz zobaczyć demo tego, co będziemy tworzyć w tym demo, które zbudowałem.
HTML
Jak widziałeś w wersji demonstracyjnej, nasz kod HTML będzie formularzem i prostym pustym polem
- które później uzupełnimy nazwami i numerami:
Mimo że ten formularz ma metodę i akcję, później zablokujemy domyślną akcję za pomocą JavaScript, aby zapobiec ponownemu ładowaniu strony i przeskakiwaniu po przesłaniu. Zamiast tego po prostu wypełnimy nieuporządkowaną listę liczb tym, co znajduje się w danych wejściowych formularza.
Skrypt kawy
Teraz przejdziemy do najlepszej części artykułu: omówimy CoffeeScript i jQuery razem, dwa narzędzia, które zostały stworzone, aby uczynić nasz rozwój w JavaScript prostszym i bardziej produktywnym.
Zanim zaczniemy kodować, zastanówmy się nad tym, co chcemy, aby ta aplikacja robiła, w punktach:
- Dodaj klasę sprawdzony jeśli pole wyboru jest zaznaczone, a jeśli nie, usuń je;
- sprawdź, czy nastąpiło kliknięcie przycisku „Wyślij”;
- pobierz wartości liczby i nazwy;
- umieść te wartości na naszej stronie;
- dodaj wszystkie nazwy i numery do LocalStorage;
- usuń wszystko co wpisaliśmy do formularza;
- uniemożliwić przesłanie formularza;
- odczytywać i wyświetlać wszelkie dane przechowywane w pamięci lokalnej.
Teraz, gdy mamy to wszystko uporządkowane, możemy zacząć od góry. Aby dodać sprawdzony klasa, którą musimy sprawdzić, czy została kliknięta, a następnie przełączyć klasę dla każdej pojedynczej klasy, w części 1 już widzieliśmy, jak konstruować funkcje w CoffeeScript, więc:
$(‘#friend’).click -> $(this).toggleClass ‘zaznaczone’
Następnie musimy sprawdzić, czy przycisk „Prześlij” został kliknięty, i zapisać kilka zmiennych, których będziemy potrzebować później:
$(‘#submit’).click -> ul = $(‘#numbers’) liczba = $(‘#number’).val() nazwa = $(‘#name’).val()
W tym kroku zdefiniowaliśmy naszą funkcję i zmienne, których będziemy potrzebować później. Zmienna ul zawiera nieuporządkowaną listę zawierającą wszystkie nazwy i liczby, a kolejne dwie będą przechowywać wszystko, co wpiszemy na wejściu.
To jest część, w której pobieramy wszystkie wartości, które mamy i dodajemy element listy dla każdej liczby, którą mamy. Pamiętaj, że chcemy stylizować rzeczy trochę inaczej, jeśli kontakt jest znajomym, więc zaznaczymy klasę pola wyboru i odpowiednio dodamy różne klasy do naszych elementów listy. W tym celu użyjemy prostego Jeśli oświadczenie, jak opisano w części 1:
jeśli $(‘#friend’).hasClass ‘zaznaczono’
$(ul).prepend ‘
Liczba: ‘ + liczba + ‘
‘
w przeciwnym razie
$(ul).prepend ‘
Liczba: ‘ + liczba + ‘
‘
Baza naszej aplikacji jest gotowa, ale jeśli odświeżysz stronę, zobaczysz, że wszystkie numery zniknęły, musimy więc dodać zawartość numerów do LocalStorage i nazwiemy ją kontaktami:
localStorage.setItem ‘kontakty’, $(ul).html()
Najpierw podajemy nazwę tego, co chcemy zapisać, a następnie po przecinku deklarujemy wartość, która ma zostać zapisana. W tym przypadku zapiszemy zawartość listy nieuporządkowanej.
Po wykonaniu tej linii wszystkie liczby i nazwy będą już w LocalStorage, więc dodajmy ostatnie szlify do funkcji, resetując formularz, a następnie zwracając FAŁSZ aby mieć pewność, że strona nie zostanie przeładowana:
$(“formularz”)[0].reset() zwraca fałsz
Funkcja jest teraz kompletna i teraz musimy tylko sprawdzić, czy w LocalStorage mamy coś o nazwie Łączność a jeśli to zrobimy, musimy po prostu umieścić to na stronie:
jeśli localStorage.getItem ‘kontakty’ $(‘#numbers’).html localStorage.getItem ‘kontakty’
Wszystko, co robimy, to sprawdzanie i umieszczanie zawartości tego elementu na stronie. Z tym ostatnim akcentem nasz mały menedżer kontaktów jest gotowy, a cały użyty kod CoffeeScript wyglądał następująco:
$(‘#friend’).click -> $(this).toggleClass ‘zaznaczone’
$(‘#submit’).click ->
ul = $(‘#liczby’)
liczba = $(‘#liczba’).val()
nazwa = $(‘#name’).val()
jeśli $(‘#friend’).hasClass ‘zaznaczono’
$(ul).prepend ‘
Liczba: ‘ + liczba + ‘
‘
w przeciwnym razie
$(ul).prepend ‘
Liczba: ‘ + liczba + ‘
‘
localStorage.setItem ‘kontakty’, $(ul).html()
$(“formularz”)[0].Resetowanie();
zwróć fałsz
jeśli localStorage.getItem ‘kontakty’
$(‘#numbers’).html localStorage.getItem ‘kontakty’
Jeśli przepuścimy ten kod przez kompilator, otrzymamy następujący kod JavaScript:
$(‘#friend’).click(funkcja() {
zwróć $(this).toggleClass(‘checked’);
});
$(‘#submit’).click(funkcja() {
var nazwa, numer, ul;
ul = $(‘#liczby’);
liczba = $(‘#liczba’).val();
nazwa = $(‘#name’).val();
jeśli ($(‘#friend’).hasClass(‘sprawdzono’)) {
$(ul).prepend(‘
Liczba: ‘ + liczba + ‘
‘);
} w przeciwnym razie {
$(ul).prepend(‘
Liczba: ‘ + liczba + ‘
‘);
}
localStorage.setItem(‘kontakty’, $(ul).html());
$(“formularz”)[0].Resetowanie();
zwróć fałsz;
});
jeśli (localStorage.getItem(‘kontakty’)) {
$(‘#numbers’).html(localStorage.getItem(‘kontakty’));
}
Porównajmy oba, możemy zobaczyć, że CoffeeScript ma 587 słów i 14 wierszy, podczas gdy Javascript ma 662 słowa i 21 wierszy, a jeśli porównamy czytelność, możemy zobaczyć, że CoffeeScript jest znacznie bardziej czytelny niż odpowiednik JavaScript. Jeśli w tego typu prostej aplikacji CoffeeScript może zaoszczędzić Ci 7 wierszy kodu, wyobraź sobie, ile zaoszczędzi w pełnej wersji aplikacji!
Wniosek
Mam nadzieję, że ten artykuł dał ci lepsze pojęcie o CoffeeScript i jak może on ulepszyć twoje codzienne kodowanie JavaScript. Kod napisany w tym artykule nie ma być najczystszym lub najłatwiejszym JavaScript, raczej miał zilustrować użycie CoffeeScript. Mam nadzieję, że teraz widzisz, jak potężny jest on z jQuery i rozważysz używanie tego świetnego małego języka w swoim codziennym kodowaniu, ponieważ z pewnością zaoszczędzi ci godzin pisania.
Czy używasz CoffeeScript? Jak bardzo jest on dla Ciebie przydatny na co dzień? Daj nam znać w komentarzach.
Wyróżniony obraz/miniaturka, obraz kawy poprzez Shutterstock.
