Σε το πρώτο μέρος αυτού του άρθρου σχετικά με το CoffeeScript, είδατε τις βασικές δυνατότητές του. αλλά ας είμαστε ειλικρινείς, τις περισσότερες φορές χρησιμοποιούμε τη βιβλιοθήκη jQuery για να μας βοηθήσετε να γράψουμε το JavaScript και αυτό που σας έδειξα στο πρώτο μέρος ήταν ακριβώς η βανίλια JavaScript.
Σε αυτό το μέρος θα συμμετάσχουμε στο CoffeeScript, το LocalStorage και το jQuery για να δημιουργήσουμε έναν απλό διαχειριστή επαφών, όπου μπορούμε να αποθηκεύσουμε τον αριθμό, το όνομα και επίσης να ελέγξουμε αν αυτό το άτομο είναι φίλος και με τη βοήθεια του LocalStorage, αυτός ο υπεύθυνος επικοινωνίας θα αποθηκεύσει τις επαφές σας όταν ανανεώστε τη σελίδα σας.
Μπορείτε να δείτε το demo του τι θα δημιουργήσουμε σε αυτό demo που έχτισα.
Όπως είδατε στην επίδειξη, η HTML μας θα είναι η μορφή και ένα απλό κενό
Παρόλο που αυτή η φόρμα έχει μια μέθοδο και μια ενέργεια, θα αποκλείσουμε αργότερα την προεπιλεγμένη ενέργεια με τη JavaScript, για να την σταματήσουμε να φορτώνει ξανά τη σελίδα και να πηδάει όταν υποβληθεί. Αντ 'αυτού θα συμπληρώσουμε απλώς τους αριθμούς που δεν έχουν ταξινομηθεί με αυτά που περιέχονται στις εισόδους της φόρμας.
Τώρα θα φτάσουμε στο καλύτερο μέρος αυτού του άρθρου: μιλάμε για το CoffeeScript και το jQuery μαζί, δύο εργαλεία που έγιναν για να κάνουν την ανάπτυξη του JavaScript απλούστερη και πιο παραγωγική.
Ας σκεφτούμε τι θέλουμε να κάνει αυτό το app σε κουκκίδες πριν από την κωδικοποίηση:
Τώρα έχουμε όλα αυτά ίσια μπορούμε να ξεκινήσουμε από την κορυφή. Για να προσθέσετε την ελεγμένη κλάση πρέπει να ελέγξουμε για ένα κλικ και στη συνέχεια να αλλάξουμε την κλάση σε κάθε κλάση, έχουμε ήδη δει πώς να κατασκευάσουμε τις λειτουργίες του CoffeeScript στο μέρος 1, έτσι ώστε:
$('#friend').click -> $(this).toggleClass 'checked'Το επόμενο πράγμα που πρέπει να κάνετε είναι να ελέγξετε για ένα κλικ στο κουμπί υποβολής και να αποθηκεύσετε ορισμένες μεταβλητές που θα χρειαζόμαστε πιο κάτω στο δρόμο:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()Σε αυτό το βήμα έχουμε ορίσει τη συνάρτηση μας και τις μεταβλητές που χρειαζόμαστε αργότερα, η μεταβλητή ul κρατάει τη μη ταξινομημένη λίστα που θα περιέχει όλα τα ονόματα και τους αριθμούς και τα επόμενα δύο θα αποθηκεύσουν ό, τι πληκτρολογούμε στις εισόδους.
Αυτό είναι το μέρος όπου έχουμε πάρει όλες τις αξίες που έχουμε και προπληρώσει ένα στοιχείο λίστας για κάθε αριθμό που έχουμε. Θυμηθείτε ότι θέλουμε να διαμορφώσουμε τα πράγματα λίγο διαφορετικά αν η επαφή είναι φίλος, επομένως θα ελέγξουμε την κλάση του πλαισίου ελέγχου και θα προσθέσουμε αντίστοιχα διαφορετικά μαθήματα στα στοιχεία της λίστας μας. Για το σκοπό αυτό θα χρησιμοποιήσουμε μια απλή δήλωση if , όπως περιγράφεται στο μέρος 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'Η βάση της εφαρμογής μας είναι έτοιμη, αλλά αν επαναλάβετε τη φόρτωση της σελίδας θα δείτε ότι όλοι οι αριθμοί έχουν φύγει, γι 'αυτό πρέπει να προσθέσουμε τα περιεχόμενα των αριθμών στο LocalStorage και θα τα ονομάσουμε επαφές:
localStorage.setItem 'contacts', $(ul).html()Αυτό που κάνουμε είναι να αναφέρουμε τι θέλουμε να σώσουμε πρώτα, και μετά από το κόμμα δηλώνουμε την αξία που πρέπει να σωθεί. σε αυτήν την περίπτωση θα αποθηκεύσουμε τα περιεχόμενα της μη ταξινομημένης λίστας.
Με αυτή τη γραμμή, έχουμε όλους τους αριθμούς και τα ονόματα στο LocalStorage, ώστε να προσθέσουμε τις τελικές πινελιές στη λειτουργία επαναφέροντας τη φόρμα και στη συνέχεια επιστρέφοντας false για να βεβαιωθείτε ότι η σελίδα δεν φορτώνεται ξανά:
$("form")[0].reset()return false Η λειτουργία είναι πλέον πλήρης και το μόνο που χρειάζεται να κάνουμε τώρα είναι να ελέγξουμε εάν διαθέτουμε κάτι στο LocalStorage με το όνομα των επαφών και αν το κάνουμε πρέπει απλώς να το τοποθετήσουμε στη σελίδα:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Το μόνο που κάνουμε είναι να ελέγξουμε και στη συνέχεια να τοποθετήσουμε το περιεχόμενο αυτού του στοιχείου στη σελίδα. Με αυτό το τελευταίο άγγιγμα, ο μικρός υπεύθυνος επικοινωνίας μας είναι έτοιμος και ο πλήρης κώδικας CoffeeScript που χρησιμοποιήθηκε ήταν:
$('#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'Και αν εκτελέσουμε αυτόν τον κώδικα μέσω του μεταγλωττιστή καταλήγουμε με το ακόλουθο 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 + ' ');} αλλού {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('επαφές', $ (ul) .html ()); $ ("φόρμα") [0] .reset (); {$('#numbers').html(localStorage.getItem('contacts'));}Συγκρίνετε και τα δύο μπορούμε να δούμε ότι το CoffeeScript έχει 587 λέξεις και 14 γραμμές ενώ το Javascript έχει 662 λέξεις και 21 γραμμές και αν συγκρίνουμε την αναγνωσιμότητα μπορούμε να δούμε ότι το CoffeeScript είναι σημαντικά πιο ευανάγνωστο από το αντίστοιχο JavaScript. Αν σε αυτόν τον τύπο απλής εφαρμογής η CoffeeScript μπορεί να σας εξοικονομήσει 7 γραμμές κώδικα, φανταστείτε πόσο θα εξοικονομούσε σε πλήρη εμφυσημένη εφαρμογή!
Ελπίζω ότι αυτό το άρθρο σας έδωσε μια καλύτερη ιδέα για το CoffeeScript και πώς μπορεί να βελτιώσει την καθημερινή κωδικοποίηση JavaScript. Ο κώδικας που γράφτηκε σε αυτό το άρθρο δεν προορίζεται να είναι καθαρότερος ή ευκολότερος χαρακτήρας JavaScript, αλλά προοριζόταν να επεξηγηθεί χρησιμοποιώντας το CoffeeScript. Ελπίζω τώρα ότι μπορείτε να δείτε πόσο ισχυρό είναι με το jQuery και σκεφτείτε να χρησιμοποιήσετε αυτή τη μεγάλη μικρή γλώσσα στην καθημερινή σας κωδικοποίηση, γιατί σίγουρα θα σας εξοικονομήσει ώρες δακτυλογράφησης.
Χρησιμοποιείτε το CoffeeScript; Πόσο χρήσιμο το βρίσκεις καθημερινά; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα καφέ μέσω Shutterstock.