Dentro a primeira parte deste artigo sobre CoffeeScript, você viu seus recursos básicos; mas vamos ser honestos, na maioria das vezes usamos a biblioteca jQuery para nos ajudar a escrever nosso JavaScript e o que eu mostrei na primeira parte foi apenas baunilha JavaScript.
Nesta parte vamos nos juntar ao CoffeeScript, LocalStorage e jQuery para criar um gerenciador de contatos simples onde podemos salvar o número de alguém, o nome e também verificar se essa pessoa é um amigo e com a ajuda do LocalStorage este gerenciador de contatos salvará seus contatos quando você atualize sua página.
Você pode ver a demonstração do que iremos criar neste demo que eu construí
Como você viu na demonstração, o nosso HTML será a forma e um simples vazio
Mesmo que este formulário tenha um método e uma ação, posteriormente bloquearemos a ação padrão com JavaScript para impedir que ele realmente recarregue a página e pule quando ela for enviada. Em vez disso, apenas preencheremos os números da lista não ordenada com o que está nas entradas do formulário.
Agora vamos entrar na melhor parte deste artigo: falando sobre CoffeeScript e jQuery juntos, duas ferramentas que foram feitas para tornar nosso desenvolvimento de JavaScript mais simples e produtivo.
Vamos pensar sobre o que queremos que esse aplicativo faça em pontos antes da codificação:
Agora temos tudo isso em ordem, podemos começar do topo. Para adicionar a classe verificada , precisamos verificar um clique e depois alternar a classe em cada classe, já vimos como construir funções no CoffeeScript na parte 1, então:
$('#friend').click -> $(this).toggleClass 'checked'A próxima coisa que precisamos é verificar um clique no botão enviar e armazenar algumas variáveis que precisaremos mais adiante:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()Nesta etapa, definimos nossa função e as variáveis que precisamos depois, a variável ul mantém a lista não ordenada que conterá todos os nomes e números e as próximas duas armazenarão o que digitarmos nas entradas.
Esta é a parte em que pegamos todos os valores que temos e prefixamos um item de lista para cada número que temos. Lembre-se de que queremos estilizar as coisas de forma um pouco diferente se o contato for um amigo, portanto, verificaremos a classe da caixa de seleção e adicionaremos classes diferentes aos itens da nossa lista de acordo. Para isso, usaremos uma instrução if simples, conforme descrito na parte 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'A base do nosso aplicativo está pronta, mas se você recarregar a página, verá que todos os números desapareceram, por isso, precisamos adicionar o conteúdo dos números ao LocalStorage e chamaremos de contatos:
localStorage.setItem 'contacts', $(ul).html()O que estamos fazendo é nomear o que queremos salvar primeiro, e depois da vírgula declaramos o valor a ser salvo. Neste caso, vamos salvar o conteúdo da lista não ordenada.
Com esta linha terminada, temos todos os números e nomes no LocalStorage, então vamos adicionar os toques finais à função redefinindo o formulário e retornando false para garantir que a página não seja recarregada:
$("form")[0].reset()return false A função agora está completa e tudo o que precisamos fazer agora é verificar se temos algo no LocalStorage com o nome dos contatos e, se precisarmos, colocaremos isso na página:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Tudo o que estamos fazendo é verificar e, em seguida, colocar o conteúdo desse item na página. Com este último toque, nosso gerenciador de contatos está pronto e o código completo do CoffeeScript usado foi:
$('#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'E se nós executarmos este código através do compilador, nós acabaremos com o seguinte 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 + ' ');} outro {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contatos', $ (ul) .html ()); $ ("forma") [0] .reset (); retorno falso;}); if (localStorage.getItem ('contatos')) {$('#numbers').html(localStorage.getItem('contacts'));}Compare os dois, podemos ver que o CoffeeScript tem 587 palavras e 14 linhas, enquanto o Javascript tem 662 palavras e 21 linhas, e se compararmos a legibilidade, podemos ver que o CoffeeScript é substancialmente mais legível do que o equivalente JavaScript. Se neste tipo de aplicativo simples o CoffeeScript puder economizar 7 linhas de código, imagine o quanto ele economizará em um aplicativo completo!
Espero que este artigo tenha lhe dado uma idéia melhor do CoffeeScript e como ele pode melhorar sua codificação JavaScript no dia-a-dia. O código escrito neste artigo não é para ser o JavaScript mais limpo ou mais fácil, mas sim para ilustrar o uso do CoffeeScript. Espero agora que você possa ver como ele é poderoso com o jQuery e considere o uso dessa excelente linguagem pequena em sua codificação diária, pois isso certamente economizará horas de digitação.
Você usa o CoffeeScript? Quão útil você encontra no dia-a-dia? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de café via Shutterstock.