Dans la première partie de cet article sur CoffeeScript, vous avez vu ses fonctionnalités de base; mais soyons honnêtes, la plupart du temps, nous utilisons la bibliothèque jQuery pour nous aider à écrire notre code JavaScript et ce que je vous ai montré dans la première partie était simplement JavaScript.
Dans cette partie, nous rejoindrons CoffeeScript, LocalStorage et jQuery pour créer un simple gestionnaire de contacts où nous pourrons enregistrer le numéro, le nom et vérifier si cette personne est un ami. Avec l'aide de LocalStorage, ce gestionnaire de contacts enregistrera vos contacts. rafraîchissez votre page.
Vous pouvez voir la démo de ce que nous allons créer dans ce démo j'ai construit.
Comme vous avez vu dans la démo, notre HTML sera la forme et un simple vide
Même si ce formulaire a une méthode et une action, nous bloquons plus tard l'action par défaut avec JavaScript pour l'empêcher de recharger la page et de sauter lorsqu'elle est soumise. Au lieu de cela, nous allons simplement remplir la liste des numéros non ordonnés avec ce qui est dans les entrées du formulaire.
Nous allons maintenant aborder la meilleure partie de cet article: parler ensemble de CoffeeScript et de jQuery, deux outils conçus pour rendre notre développement JavaScript plus simple et plus productif.
Pensons à ce que nous souhaitons que cette application fasse dans les puces avant le codage:
Maintenant, nous avons tout ce droit, nous pouvons commencer par le haut. Pour ajouter la classe vérifiée , nous devons vérifier un clic et ensuite basculer la classe sur chaque classe, nous avons déjà vu comment construire des fonctions dans CoffeeScript dans la partie 1:
$('#friend').click -> $(this).toggleClass 'checked'La prochaine chose à faire est de vérifier un clic sur le bouton d'envoi et de stocker des variables dont nous aurons besoin plus tard:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()Dans cette étape, nous avons défini notre fonction et les variables dont nous avons besoin plus tard, la variable ul contient la liste non ordonnée qui contiendra tous les noms et numéros et les deux suivantes stockeront tout ce que nous taperons sur les entrées.
C'est la partie où nous saisissons toutes les valeurs que nous avons et ajoutons un élément de liste pour chaque nombre que nous avons. Rappelez-vous que nous voulons définir les choses un peu différemment si le contact est un ami, nous allons donc vérifier la classe de la case à cocher et ajouter différentes classes à nos éléments de liste en conséquence. Pour cela, nous allons utiliser une instruction if simple telle que décrite dans la partie 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'La base de notre application est prête, mais si vous rechargez la page, vous verrez que tous les numéros ont disparu, nous devons donc ajouter le contenu des numéros à LocalStorage et nous l'appellerons contacts:
localStorage.setItem 'contacts', $(ul).html()Ce que nous faisons, c'est nommer ce que nous voulons enregistrer en premier, puis, après la virgule, nous déclarons la valeur à enregistrer. dans ce cas, nous allons enregistrer le contenu de la liste non ordonnée.
Avec cette ligne terminée, nous avons tous les numéros et noms dans LocalStorage, donc ajoutons la touche finale à la fonction en réinitialisant le formulaire et en renvoyant false pour que la page ne se recharge pas:
$("form")[0].reset()return false La fonction est maintenant terminée et tout ce que nous avons à faire est de vérifier si nous avons quelque chose dans LocalStorage avec le nom des contacts et si nous le faisons, il suffit de le placer sur la page:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Tout ce que nous faisons est de vérifier et de placer le contenu de cet élément sur la page. Avec cette dernière touche, notre petit gestionnaire de contacts est terminé et le code CoffeeScript complet utilisé était:
$('#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'Et si nous exécutons ce code via le compilateur, nous obtenons le code JavaScript suivant:
$('#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 + ' ');} autre {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacts', $ (ul) .html ()); $ ("form") [0] .reset (); retourne false;}); if (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}Comparez les deux, nous pouvons voir que le CoffeeScript a 587 mots et 14 lignes tandis que le Javascript a 662 mots et 21 lignes, et si nous comparons la lisibilité, nous pouvons voir que le CoffeeScript est sensiblement plus lisible que l'équivalent JavaScript. Si, dans ce type d’application simple, CoffeeScript peut vous faire économiser 7 lignes de code, imaginez combien vous économiserez en pleine application!
J'espère que cet article vous a donné une meilleure idée de CoffeeScript et de la manière dont il peut améliorer votre code JavaScript quotidien. Le code écrit dans cet article n'est pas destiné à être le code JavaScript le plus propre ou le plus simple, mais plutôt à illustrer l'utilisation de CoffeeScript. J'espère maintenant que vous pouvez voir à quel point il est puissant avec jQuery et que vous envisagez d'utiliser ce petit langage dans votre codage quotidien, car cela vous permettra certainement de gagner des heures de frappe.
Utilisez-vous CoffeeScript? Dans quelle mesure trouvez-vous cela utile au quotidien? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de café via Shutterstock.