W pierwsza część tego artykułu o CoffeeScript, widziałeś jego podstawowe możliwości; ale bądźmy szczerzy, większość czasu używamy biblioteki jQuery, aby pomóc nam napisać nasz skrypt JavaScript, a to, co pokazałem wam w pierwszej części, to tylko vanilla JavaScript.
W tej części dołączymy do CoffeeScript, LocalStorage i jQuery, aby stworzyć prostego menedżera kontaktów, w którym możemy zapisać czyjś numer, nazwisko, a także sprawdzić, czy ta osoba jest przyjacielem, a przy pomocy LocalStorage ten menedżer kontaktów zapisze twoje kontakty, kiedy odśwież swoją stronę.
Możesz zobaczyć demo tego, co będziemy w tym tworzyć wersja demo, którą zbudowałem.
Jak widzieliście w wersji demonstracyjnej, nasz HTML będzie miał formę i był pusty
Mimo że ten formularz ma metodę i działanie, później zablokujemy domyślną akcję za pomocą JavaScriptu, aby uniemożliwić jej ponowne załadowanie strony i przeskoczenie po jej przesłaniu. Zamiast tego wypełnimy listę liczb nieuporządkowanych, korzystając z danych wejściowych formularza.
Teraz zajmiemy się najlepszą częścią tego artykułu: rozmawiamy o programach CoffeeScript i jQuery, dwóch narzędziach, które sprawiły, że nasz JavaScript jest prostszy i bardziej produktywny.
Zastanówmy się, co chcemy, aby ta aplikacja działała w punktach przed kodowaniem:
Teraz wszystko mamy proste, możemy zacząć od początku. Aby dodać sprawdzoną klasę, musimy sprawdzić kliknięcie, a następnie przełączyć klasę na każdą klasę, już widzieliśmy jak konstruować funkcje w CoffeeScript w części 1, więc:
$('#friend').click -> $(this).toggleClass 'checked'Następną rzeczą, którą musimy zrobić, jest sprawdzenie kliknięcia przycisku "Prześlij" i zapisanie pewnych zmiennych, które będą nam potrzebne w dalszej części drogi:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()W tym kroku zdefiniowaliśmy naszą funkcję i zmienne, których potrzebujemy później, zmienna ul zawiera listę nieuporządkowaną, która będzie zawierać wszystkie nazwy i numery, a kolejne dwa będą zapisywać to, co wpisujemy na danych wejściowych.
Jest to część, w której pobieramy wszystkie wartości, które mamy, i przygotowujemy element listy dla każdego numeru, który mamy. Pamiętajmy, że chcemy stylizować rzeczy nieco inaczej, jeśli kontakt jest przyjacielem, więc sprawdzimy klasę pola wyboru i odpowiednio dodamy różne klasy do naszych pozycji na liście. W tym celu użyjemy prostej instrukcji if , jak opisano w części 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Podstawa naszej aplikacji jest gotowa, ale po przeładowaniu strony zobaczysz, że wszystkie numery zniknęły, więc musimy dodać zawartość numerów do LocalStorage, a my nazwiemy to kontaktami:
localStorage.setItem 'contacts', $(ul).html()To, co robimy, to nazywanie tego, co chcemy najpierw zapisać, a następnie po przecinku deklarujemy wartość do zapisania. w takim przypadku zapiszemy zawartość nieuporządkowanej listy.
Po wykonaniu tej linii mamy wszystkie liczby i nazwy w LocalStorage, dodajmy więc ostatnie poprawki do funkcji, resetując formularz, a następnie zwracając wartość false, aby upewnić się, że strona nie zostanie ponownie załadowana:
$("form")[0].reset()return false Ta funkcja jest teraz zakończona i wszystko, co musimy teraz zrobić, to sprawdzić, czy mamy coś w LocalStorage z nazwą kontaktów, a jeśli tak, musimy po prostu umieścić to na stronie:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Wszystko, co robimy, to sprawdzenie, a następnie umieszczenie zawartości tego elementu na stronie. Z tym ostatnim dotknięciem nasz mały menedżer kontaktów jest gotowy, a cały kod kawy został użyty:
$('#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 jeśli uruchomimy ten kod przez kompilator, otrzymamy następujący kod 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 + ' ');} jeszcze {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ("kontakty", $ (ul) .html ()); $ ("formularz") [0] .reset (); return false;}); if (localStorage.getItem ("kontakty")) {$('#numbers').html(localStorage.getItem('contacts'));}Porównajcie obydwa, widzimy, że CoffeeScript ma 587 słów i 14 linii, podczas gdy JavaScript ma 662 słowa i 21 linii, a jeśli porównamy czytelność, zauważymy, że CoffeeScript jest znacznie bardziej czytelny niż odpowiednik JavaScriptu. Jeśli w tym typie prostej aplikacji CoffeeScript może zaoszczędzić 7 linii kodu, wyobraź sobie, ile zaoszczędziłoby to w pełnej wersji aplikacji!
Mam nadzieję, że ten artykuł dał ci lepsze wyobrażenie o CoffeeScript i o tym, jak może poprawić twoje codzienne kodowanie JavaScript. Kod napisany w tym artykule nie ma być najczystszym lub najłatwiejszym JavaScriptem, raczej miał być zilustrowany za pomocą CoffeeScript. Mam nadzieję, że teraz możesz zobaczyć, jak potężne jest to w jQuery i rozważasz używanie tego świetnego języka w codziennym kodowaniu, ponieważ na pewno zaoszczędzisz wielu godzin pisania.
Czy używasz CoffeeScript? Jak przydatne jest codzienne? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz kawy przez Shutterstock.