Aprenda La Guía Absoluta para Principiantes de CoffeeScript

CoffeeScript se ha vuelto cada vez más popular en los últimos años debido a su adopción por el Nodo.comunidades js y Rails. Echemos un vistazo a por qué se ha convertido en el lenguaje de referencia cuando las personas desean escribir JavaScript en sus aplicaciones.

¿Qué es CoffeeScript?

CoffeeScript es un lenguaje que se compila a JavaScript. Código .los archivos coffee no se interpretan en tiempo de ejecución, como JavaScript, sino que se compilan en ellos .archivos js.

Si está escribiendo para JavaScript para el nodo.js o cualquier implementación de navegador, CoffeeScript se puede escribir para cualquier tipo de JavaScript.

¿Por qué CoffeeScript?

En el pasado, JavaScript no ha tenido la reputación más estelar debido a la mentalidad de copiar y pegar de los años 90 y principios de los 2000, parecía que solo unos pocos tenían idea de lo que estaba pasando. Se lo consideraba un lenguaje no tan «serio». Sin embargo, JavaScript como lenguaje tiene mucho que ofrecer y tiene algunas súper características.

CoffeeScript hace uso de las potentes funciones de JavaScript sin aprender las funciones menos conocidas de JavaScript añadiendo «azúcar sintáctica» a JavaScript. CoffeeScript no tiene el punto y coma ni llaves, una sintaxis similar a la de Python y Ruby.

Esto significa que puede escribir menos código y hacer las cosas más rápido. También hace que sea más fácil de leer y mantener.

Debido a las optimizaciones que utiliza CoffeeScript, cuando se compila, el JavaScript resultante es igual de eficaz o, en algunos casos, incluso más eficaz que el código escrito a mano.

Puedes aprender mucho sobre JavaScript mirando el JavaScript al que CoffeeScript compila. Si hay algo nuevo que ves allí, investigalo y ve por qué CoffeScript compila de esa manera en lugar de lo que estás acostumbrado a ver.

Instalando CoffeeScript

Instalemos CoffeeScript para que pueda seguirlo. CoffeeScript es un nodo.paquete js. Así que depende del nodo.js y el gestor de paquetes (npm).

En el Nodo OS X

.js se puede instalar utilizando Homebrew, un Gestor de paquetes de código abierto para OS X. Puede revisar el proceso de instalación de Homebrew aquí.

Asegúrese de que su Homebrew esté actualizado escribiendo brew update en su terminal.

La fórmula Homebrew para Nodo.js es node. Así que para instalar el nodo.js escriba brew install node en su terminal. Siga las instrucciones adicionales que aparezcan si necesita modificar PATH s o algo por el estilo.

Luego escribanpm install -g coffee-script para instalarlo globalmente.

En Windows

Nodo de visita.sitio web de js y pulse el botón» Instalar». Debe detectar automáticamente el tipo de Windows que está utilizando y un instalador comenzará a descargarse.

Pasar por el proceso de instalación.

Una vez instalado, abra el símbolo del sistema y escriba npm install -g coffee-script para instalarlo globalmente.

Y finalmente

Escriba coffee -v en su línea de comandos para ver que se ha instalado correctamente.

Uso de la línea de comandos

El compiladorcoffee se puede usar de varias maneras. Aquí hay un par para ver qué hay disponible.

Ejecute y Compile

El siguiente comando compilará todos sus archivos .coffee en una carpeta llamada coffeescripts a .js en una estructura de árbol paralela en el javascripts carpeta.

coffee -o javascripts/ -c coffeescripts/

Warning

La opción -c significa para compilar y -o significa la carpeta de salida. Tenga en cuenta que el orden se genera y luego se compila. Esto se debe a que si cambia el orden, no funciona.

Watcher

Ejecutar el comando anterior cada vez que desee compilar archivos CoffeeScript, por lo que hay otra opción útil para usar, -w.

coffee -w -o javascripts/ -c coffeescripts/

El observador escucha los cambios en los archivos de la carpeta coffeescripts y los compila sobre la marcha.

Si agrega un nuevo archivo a la carpeta coffeescripts debería compilarse, sin embargo, si agrega una nueva carpeta y un archivo CoffeeScript dentro, no se compilará. Esto podría cambiar en versiones posteriores.

Unir archivos

También puede compilar todos sus archivos .coffee en un solo archivo JavaScript. Esto reducirá el número de solicitudes HTTP que debe realizar un navegador y mejorará el rendimiento. Para hacer esto, use la opción -j de la siguiente manera:

coffee -j javascripts/app.js -c coffeescripts/*.coffee

El * es un operador comodín.

REPL

Si escribe coffee sin ninguna opción, se abre un shell interactivo. Esto es similar a irb en Ruby. Esta es una gran herramienta para cosas en la consola y realizar experimentos rápidos.

Resaltado del editor de texto

Si vas a codificar en CoffeeScript, lo mejor que puedes hacer es tener resaltado de sintaxis.

TextMate

Jeremy Ashkenas, inventor de CoffeeScript, creó un práctico paquete de TextMate. Para obtener instrucciones de instalación, haga clic aquí.

Sublime Text 2

Sublime Text 2 tiene un plugin creado por el usuario de GitHub Xavura. Puede instalar esto a través del Control de Paquete Sublime, si ya lo tiene.

Lo bueno también conocido como La sintaxis

Variables

Las variables en CoffeeScript no requieren la palabra clave var. Simplemente nombra tu variable, un signo igual y luego el valor.

year = 1985speed = 88

Cadenas

Las cadenas se declaran con comillas como en la mayoría de los otros idiomas.

first_name = "Marty"

Para unir o concatenar cadenas, puede enumerarlas una tras otra con un símbolo más en el medio, como este:

full_name = first_name + " McFly"

También puede incluir el símbolo hash (#), seguido de llaves, y dentro de las variable de cadena.

full_name = "#{first_name} McFly"

Los dos ejemplos anteriores crearían la cadena Marty McFly.

Este último tipo de interpolación de cadenas solo funciona cuando se utilizan comillas dobles. Si utiliza comillas simples, el texto se muestra «tal cual». Las cadenas de comillas simples son cadenas literales.

full_name = '#{first_name} McFly'

por Lo que la anterior será la cadena de #{first_name} McFly. Esto refleja el comportamiento.

Funciones

Las funciones se declaran nombrando la función, el signo igual y, a continuación, un símbolo de función especial (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

no Hemos utilizado la palabra clave return porque cada función en CoffeeScript, devuelve el resultado de la última línea de código.

Las funciones de líneas múltiples se escriben en varias líneas y cada línea después de la declaración tiene un espacio en blanco antes de ella.

initialize_time_circuits = -> year = 1885 year * flux_capacitor_constant * speed

Este sería el año a 1885 cada vez. Si queremos que el año sea mucho más flexible, pero tenga un valor predeterminado, podemos llevarlo a la declaración del método de la siguiente manera:

initialize_time_circuits = (speed, year = 1885) -> year * flux_capacitor_constant * speed

Esto significará que podemos llamar a esto con un valor de speed el year siempre será 1885.

 initialize_time_circuits(88)

También puede llamar a métodos sin usar paréntesis. Lo anterior también se puede escribir como:

 initialize_time_circuits 88

Arrays

Hay varias formas diferentes de inicializar y declarar arrays en CoffeeScript. Probablemente esté acostumbrado a ver matrices declaradas con corchetes y valores separados por comas.

 mcflys = 

también puede declarar matrices a través de varias líneas como esta:

 mcflys = 

tienes Que tener espacio en blanco en cada línea.

Opcionalmente, puede eliminar la coma final de cada línea.

 mcflys = 

También puede usar una combinación de estos dos estilos de declaración.

El siguiente ejemplo…

woah = 

…es el equivalente a:

woah = 

Que pueden ser más o menos legible dependiendo de su aplicación. CoffeeScript le permite hacerlo de una variedad de maneras para satisfacer sus necesidades.

Objetos

Los literales o hashes de objetos se pueden declarar como sus contrapartes JavaScript y de algunas otras formas funky.

Dada la siguiente JSON…

…puedes colocar las comas y llaves:

mientras que la sangría con algunos espacios en blanco, la estructura se hace anidada como era de esperar.

Rangos

Los rangos se declaran por dos enteros separados por dos puntos, envueltos entre corchetes.

days = 

Los rangos no son un tipo de objeto estándar en Javascript, por lo que se compilan en matrices.

Para obtener una subsección de una matriz, también puede pasar un rango. Desea obtener días de tuesday_to_friday donde el lunes es el 1 y el domingo es 7? Dado que los arrays están indexados en base a cero, comenzaríamos en 1 y terminaríamos en 4.

days = tuesday_to_friday = days

También puede reemplazar secciones enteras de matrices de una manera similar.

El siguiente…

days = 

Modifica el days array a ser .

puede utilizar rangos en la cuenta regresiva demasiado por ejemplo sería 10 a 0.

Splat

Un splat es una forma conveniente de aceptar múltiples valores como argumentos para los métodos.

En el siguiente ejemplo, queremos otorgar puntos kudos a un grupo de usuarios del foro por el número de publicaciones en una semana determinada.

La primera persona obtiene 10 puntos, la segunda obtiene 6, la tercera obtiene 2 y todos los demás obtendrán un solo punto.

Vamos a crear una función, giveKudosfirstsecond y third como parámetros. Para el resto, bien use un splat, que es el nombre de la variable seguido de 3 puntos. Dentro del método giveKudos llamemos a un addKudosToUser no implementado que toma dos parámetros, el usuario y los puntos a agregar. No nos vamos a preocupar por la implementación, es solo para fines ilustrativos.

giveKudos = (first, second, third, rest...) -> addKudosToUser first, 10 addKudosToUser second, 6 addKudosToUser third, 2

a continuación, podemos utilizar un for in bucle en el rest.

Dado que tenemos una variedad de usuarios:

users = 

Queremos que Pasen obtenga 10 puntos, Amit obtenga 6, Jim obtenga 2 y luego el resto obtenga 1.

Tenemos que pasar los usuarios con los períodos en que el método para asignar correctamente los valores de la matriz a de los parámetros como este:

giveKudos users...

Sin estos períodos, users obtener asigna a la etiqueta first parámetro y undefined para el resto.Las clases

Las clases

se pueden declarar trivialmente en CoffeeScript, lo que es un contraste refrescante con el JavaScript mucho más detallado.

Primero escriba la palabra clave class, seguida del nombre de su clase.Los métodos

, incluido el método constructor, se escriben con el nombre del método seguido de dos puntos. Se necesita espacio en blanco antes del nombre de cada método. A continuación, puede utilizar el operador de función (->).

class TimeMachine constructor: ->

Para crear una instancia de un objeto, utilice la palabra clave new seguida del nombre de la clase.

time_machine = new TimeMachine

Variables de instancia

Las variables de instancia comienzan con un símbolo @. Así que podemos tener un piloto

class TimeMachine constructor: (pilot) -> @pilot = pilot

También puede acceder a ellos a través de la notación de puntos.

class TimeMachine constructor: (pilot) -> @pilot = pilot time_machine = new TimeMachine "H. G. Wells"console.log time_machine.pilot

En el ejemplo anterior de la cadena H. G. Wells se imprime en la consola.

en Lugar de la configuración de @pilot = pilot se puede escribir en taquigrafía como esto:

class TimeMachine constructor: (@pilot) ->

la Herencia de clases

escribir una subclase puede usar extends como este:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

digamos TimeMachine tiene un método go con un parámetro que se obtiene de la sesión cuando la Máquina del Tiempo está a punto de viajar en el tiempo.

class TimeMachine constructor: (@pilot) -> go: (noise) -> console.log noise

Ahora vamos a llamar al método super para cada implementación de time machine.

Así que llamando a go() en instancias de ambas máquinas del tiempo imprimirá su propio sonido respectivo.

Sintaxis general

Con CoffeeScript encontrarás que tu código se parece más a una oración en inglés:

light_bulbs() if switch is on

Que es lo mismo que:

light_bulbs() unless switch is not on

Mientras que este último es más difícil de analizar que el primero, le muestra el alcance del nuevo azúcar.

Aquí hay una tabla de equivalentes de la página de documentación de CoffeeScript sobre Operadores y alias.

CoffeeScript	JavaScript
es	===
no	!==
no	!
and	&&
or	||
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	no JS equivalent

Existential Operator

CoffeeScript brings another cool operator to the table called the Existential Operator, which is a question mark (?).

Digamos que un user no ha iniciado sesión y no se ha establecido todavía. Si desea que se llame a la función de inicio de sesión si el user no está presente, simplemente use el operador Existencial de la siguiente manera:

login() if not user?

También puede establecer valores predeterminados como:

year ?= 1885

Puede usar el operador Existencial de una manera similar a un operadora ternaria. En el siguiente ejemplo, el saludo sería message, si no undefined o la cadena » Hello, World!».

greeting = message ? "Hello, World!"

Finalmente hay una variante de accessor que puedes usar para absorber referencias null cuando encadenas propiedades juntas.

ip = securitySystem.lastUser?().remoteSystem?.ipAddress

Así que en lugar de criar a un TypeError esto volvería undefined.

Comprensiones

Las comprensiones pueden hacer que su código sea más legible. En nuestro ejemplo de felicitaciones, teníamos el bucle for pasando por dos líneas, cuando podríamos haberlo escrito en una línea como esta:

Otra característica interesante del bucle sobre cosas en CoffeeScript es que el bucle devuelve una matriz de los resultados de ese bucle. Digamos que quiero contar de 0 a 100 en múltiplos de 10. Todo lo que hago es anteponer mi bucle con una asignación de variables como esta:

multiples = for num in num * 10

Agregando paréntesis, ¡también puede llevarlo a una línea!

multiples = (num * 10 for num in )

Conclusión

Woah! Eso fue mucho para asimilar, pero como puedes ver, CoffeeScript está lleno de sintaxis azucarada sabrosa. ¿Por qué no darle una paliza en su próximo proyecto de JavaScript y ver lo que compila debajo del capó?

• guía para principiantes de coffeescript
• coffeescript
• aprender a programar
• crear un sitio web