In het eerste deel van dit artikel over CoffeeScript zag je de basisfuncties; maar laten we eerlijk zijn, meestal gebruiken we de jQuery-bibliotheek om ons te helpen ons JavaScript te schrijven en wat ik je liet zien in het eerste deel was gewoon vanille JavaScript.
In dit deel zullen we lid worden van CoffeeScript, LocalStorage en jQuery om een eenvoudige contactmanager te maken waarin we iemands nummer, naam kunnen opslaan en ook kunnen controleren of die persoon een vriend is, en met behulp van LocalStorage zal deze contactmanager je contacten opslaan wanneer je vernieuw uw pagina.
Je kunt de demo zien van wat we hier gaan creëren demo die ik heb gebouwd.
Zoals je in de demo zag, is onze HTML het formulier en een eenvoudige leeg
Hoewel dit formulier een methode en actie heeft, zullen we later de standaardactie met JavaScript blokkeren om te voorkomen dat deze de pagina daadwerkelijk herlaadt en springt wanneer deze wordt verzonden. In plaats daarvan vullen we gewoon de nummers ongeordende lijst in met wat er in de invoer van het formulier staat.
Nu zullen we ingaan op het beste deel van dit artikel: praten over CoffeeScript en jQuery samen, twee tools die zijn gemaakt om onze JavaScript-ontwikkeling eenvoudiger en productiever te maken.
Laten we eens nadenken over wat we willen dat deze app in opsommingstekens doet vóór de codering:
Nu hebben we dit allemaal recht, we kunnen vanaf de top beginnen. Om de gecontroleerde klasse toe te voegen, moeten we controleren of er een klik is en vervolgens de klasse op elke klasse schakelen, we hebben al gezien hoe we functies in CoffeeScript in deel 1 kunnen bouwen, dus:
$('#friend').click -> $(this).toggleClass 'checked'Het volgende wat we moeten doen, is controleren of u op de knop Verzenden klikt en een aantal variabelen opslaan die we later nog nodig hebben:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()In deze stap hebben we onze functie gedefinieerd en de variabelen die we later nodig hebben, de variabele ul bevat de ongeordende lijst die alle namen en nummers zal bevatten en de volgende twee zullen opslaan wat we typen op de ingangen.
Dit is het deel waar we alle waarden pakken die we hebben en een lijstitem toevoegen voor elk nummer dat we hebben. Vergeet niet dat we de dingen een beetje anders willen stijlen als de contactpersoon een vriend is, dus we zullen de klasse van het selectievakje controleren en dienovereenkomstig verschillende klassen aan onze lijstitems toevoegen. Hiervoor gebruiken we een eenvoudige if- statement zoals beschreven in deel 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'De basis van onze app is klaar, maar als je de pagina herlaad, zie je dat alle nummers verdwenen zijn, dus we moeten de inhoud van de nummers toevoegen aan LocalStorage en we zullen het contacten noemen:
localStorage.setItem 'contacts', $(ul).html()Wat we doen is eerst een naam geven aan wat we willen opslaan, en na de komma verklaren we de waarde die moet worden opgeslagen. in dit geval bewaren we de inhoud van de ongeordende lijst.
Als deze regel is voltooid, hebben we alle nummers en namen in LocalStorage, dus laten we de laatste hand leggen aan de functie door het formulier opnieuw in te stellen en vervolgens false te retourneren om te zorgen dat de pagina niet opnieuw wordt geladen:
$("form")[0].reset()return false De functie is nu voltooid en alles wat we nu moeten doen is controleren of we iets hebben in LocalStorage met de naam van contactpersonen en als dat zo is, hoeven we dat alleen op de pagina te plaatsen:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Het enige wat we doen is de inhoud van dat item controleren en vervolgens op de pagina plaatsen. Met deze laatste aanraking is onze kleine contactmanager klaar en was de volledige gebruikte CoffeeScript-code:
$('#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'En als we deze code door de compiler voeren, krijgen we het volgende 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 + ' ');} anders {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacten', $ (ul) .html ()); $ ("vorm") [0] .reset (); return false;}); if (localStorage.getItem ('contacten')) {$('#numbers').html(localStorage.getItem('contacts'));}Vergelijk beide, we kunnen zien dat de CoffeeScript 587 woorden en 14 regels heeft terwijl de Javascript-een 662 woorden en 21 lijnen heeft, en als we de leesbaarheid vergelijken, kunnen we zien dat de CoffeeScript aanzienlijk beter leesbaar is dan het JavaScript-equivalent. Als in dit type eenvoudige toepassing CoffeeScript je 7 regels code kan besparen, stel je dan voor hoeveel het zou besparen in een volledige applicatie!
Ik hoop dat dit artikel je een beter idee geeft van CoffeeScript en hoe het je dagelijkse JavaScript-codering kan verbeteren. De code die in dit artikel wordt geschreven, is niet bedoeld als schoonste of gemakkelijkste JavaScript, maar was eerder bedoeld om te illustreren met behulp van CoffeeScript. Ik hoop dat je nu kunt zien hoe krachtig het is met jQuery en je overweegt deze geweldige kleine taal in je dagelijkse codering te gebruiken, omdat het je urenlang typen zal besparen.
Gebruik je CoffeeScript? Hoe nuttig vind je het van dag tot dag? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, koffie afbeelding via Shutterstock.