En la primera parte de este artículo sobre CoffeeScript, viste sus capacidades básicas; pero seamos honestos, la mayoría de las veces usamos la biblioteca jQuery para ayudarnos a escribir nuestro JavaScript y lo que le mostré en la primera parte fue simplemente JavaScript vano.
En esta parte uniremos CoffeeScript, LocalStorage y jQuery para crear un simple administrador de contactos donde podamos guardar el número de alguien, el nombre y también verificar si esa persona es un amigo, y con la ayuda de LocalStorage, este administrador de contactos guardará sus contactos cuando usted actualiza tu página
Puedes ver la demostración de lo que crearemos en este demo que construí
Como viste en la demostración, nuestro HTML será el formulario y un simple vacío
Aunque este formulario tiene un método y una acción, posteriormente bloquearemos la acción predeterminada con JavaScript para evitar que realmente se vuelva a cargar la página y salte cuando se envíe. En su lugar, solo llenaremos la lista de números desordenados con lo que está en las entradas del formulario.
Ahora veremos la mejor parte de este artículo: hablar sobre CoffeeScript y jQuery juntos, dos herramientas que se hicieron para simplificar y aumentar el desarrollo de JavaScript.
Pensemos en lo que queremos que haga esta aplicación en viñetas antes de la codificación:
Ahora que tenemos todo esto en claro podemos comenzar desde arriba. Para agregar la clase marcada , necesitamos comprobar si hay un clic y luego alternar la clase en cada clase, ya hemos visto cómo construir funciones en CoffeeScript en la parte 1, así que:
$('#friend').click -> $(this).toggleClass 'checked'Lo siguiente que debemos hacer es comprobar si hacemos clic en el botón Enviar y almacenar algunas variables que necesitaremos más adelante:
$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()En este paso, hemos definido nuestra función y las variables que necesitamos más adelante, la variable ul contiene la lista desordenada que contendrá todos los nombres y números y las dos siguientes almacenarán lo que escribamos en las entradas.
Esta es la parte donde tomamos todos los valores que tenemos y anteponemos un elemento de la lista para cada número que tenemos. Recuerde que queremos cambiar el estilo de las cosas un poco diferente si el contacto es un amigo, por lo que vamos a verificar la clase de la casilla de verificación y agregar diferentes clases a los elementos de nuestra lista en consecuencia. Para eso usaremos una declaración if simple como se describe en la parte 1:
if $('#friend').hasClass 'checked'$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'else$(ul).prepend 'Name: ' + name + '
Number: ' + number + ' 'La base de nuestra aplicación está lista, pero si vuelves a cargar la página verás que todos los números se han ido, así que tenemos que agregar el contenido de los números a LocalStorage y lo llamaremos contactos:
localStorage.setItem 'contacts', $(ul).html()Lo que estamos haciendo es nombrar primero lo que queremos guardar, y luego, después de la coma, declaramos el valor que se guardará. en este caso guardaremos los contenidos de la lista desordenada.
Una vez hecha esta línea, tenemos todos los números y nombres en LocalStorage, así que agreguemos los toques finales a la función reiniciando el formulario y luego devolviendo el valor falso para asegurar que la página no se vuelva a cargar:
$("form")[0].reset()return false La función ahora está completa y todo lo que tenemos que hacer ahora es verificar si tenemos algo en LocalStorage con el nombre de los contactos y, si lo hacemos, solo tenemos que colocar eso en la página:
if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'Todo lo que hacemos es verificar y luego colocar el contenido de ese elemento en la página. Con este último toque nuestro pequeño administrador de contactos está hecho y el código completo de CoffeeScript utilizado fue:
$('#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'Y si ejecutamos este código a través del compilador, terminamos con el siguiente 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 + ' ');} más {$(ul).prepend('Name: ' + name + '
Number: ' + number + ' ');} localStorage.setItem ('contacts', $ (ul) .html ()); $ ("form") [0] .reset (); return false;}); if (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}Compare ambos podemos ver que el CoffeeScript tiene 587 palabras y 14 líneas, mientras que el de Javascript tiene 662 palabras y 21 líneas, y si comparamos la legibilidad, podemos ver que el CoffeeScript es sustancialmente más legible que el equivalente de JavaScript. Si en este tipo de aplicación simple, CoffeeScript puede ahorrarle 7 líneas de código, ¡imagínese cuánto ahorraría en una aplicación completa!
Espero que este artículo te haya dado una mejor idea de CoffeeScript y de cómo puede mejorar tu codificación de JavaScript día a día. El código escrito en este artículo no pretende ser el más limpio o el JavaScript más fácil, sino que fue diseñado para ilustrar el uso de CoffeeScript. Espero que ahora puedas ver cuán poderoso es con jQuery y consideres utilizar este gran y pequeño lenguaje en tu codificación diaria, ya que definitivamente te ahorrará horas de tipeo.
¿Usas CoffeeScript? ¿Qué tan útil lo encuentras día a día? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de café a través de Shutterstock.