Share
Aunque CoffeeScript es un nuevo lenguaje, lo aprenderás muy rápido. Deberías, ya que solo es JavaScript haciendo alarde de algo de ropa llamativa, después de todo. Se lee como Ruby o Python, pero se compila a JavaScript puro, no esponjoso. Hoy vamos a echar un vistazo a por qué todo el mundo está hablando de CoffeeScript..
Con el advenimiento de potentes motores de JavaScript, como V8, JavaScript ha eliminado su estigma de una herramienta simplificada para las interacciones juveniles y se ha transformado en una gran potencia. Incluso ha saltado de las aplicaciones del lado del cliente al lado del servidor, por ejemplo, node.js. El hecho de que se adhiera a una ideología basada en prototipos bastante ingeniosa tampoco la perjudica. No hay duda de que JavaScript es de hecho un lenguaje crítico ahora y en el futuro previsible..
Pero siempre he sentido que la sintaxis en sí misma es un poco confusa. Después de trabajar con una mezcla de Ruby y Python durante los últimos dos años, he encontrado que la sintaxis verbosa, con paréntesis y con infusión de semiconductor de JavaScript es tediosa. Y de lo que puedo reunir, no estoy solo en sentir de esta manera. Aquí es donde CoffeeScript viene al rescate.!
CoffeeScript se compila hasta JS en bruto.
CoffeeScript es esencialmente una reescritura sintáctica de JavaScript. El lenguaje central sigue siendo el mismo, con pequeñas mejoras semánticas. La sintaxis es modificada, modelada después de Python y Ruby.
Recuerde que el compilador de CoffeeScript produce un JavaScript limpio que no solo sigue las mejores prácticas y que se puede leer fácilmente, sino que también pasa a JSLint. Esto significa que no tiene que preocuparse por la compatibilidad en el futuro. En el peor de los casos en que este proyecto se está muriendo, puede simplemente recoger el JS prístino que genera CoffeeScript y continuar con su código. No estás encerrado en este entorno.
Esto puede parecer un concepto extraño, pero bajo el paraguas del desarrollo web, ya hemos visto nuestra parte justa de esta ideología. HAML no es más que una nueva forma de escribir HTML, mientras que SASS hace lo mismo con CSS. Todos ellos limpian la estructura y la sintaxis de sus idiomas para que sean más fáciles de trabajar y, por lo tanto, aumenten nuestra productividad..
Probablemente te estés preguntando cómo se ve el código, así que aquí tienes un vistazo rápido:
índice = (lista, destino) -> [bajo, alto] = [0, list.length] mientras está bajo < high mid = (low + high) >> 1 val = list [mid] devuelve mid si val es target si val < target then low = mid + 1 else high = mid return -1
Esta es una implementación rápida de una búsqueda binaria. No intentes analizar el código en este momento. Intenten familiarizarse con la sintaxis..
A continuación se muestra el código JavaScript que genera CoffeeScript:
índice var índice = función (lista, objetivo) var alto, bajo, medio, val, _ref; _ref = [0, list.length], low = _ref [0], high = _ref [1]; mientras < high) mid = (low + high) >> 1; val = lista [medio]; if (val === target) return mid; si (val < target) low = mid + 1; else high = mid; return -1; ;
Aquí hay algunas ventajas y desventajas rápidas de usar CoffeeScript. Esto no es exhaustivo de ninguna manera, pero creo que es suficiente para obtener una visión general rápida del sistema.
Por supuesto, hay muchos otros puntos que incluyen mejoras semánticas y sintácticas..
Los métodos oficiales para comenzar incluyen una utilidad de línea de comandos que se ejecuta en node.js y simplemente descargando la fuente e instalándola. No hay mucho que guiar aquí. Obtenga la utilidad node.js y use npm instalar coffee-script [o para la fuente, bin / cake install] para instalar y empezar.
La situación con Windows es un poco más complicada. No hay una forma directa de obtener node.js o la fuente instalada en Windows [fuera de Cygwin]. Aunque nunca te preocupes. Un número de personas emprendedoras han escrito compiladores que funcionan de forma nativa en Windows. He incluido algunos a continuación:
Tenga en cuenta que el compilador, en forma de JavaScript compilado, también se incluye con la fuente, si está interesado. Está presente bajo la extra directorio con un nombre obvio.
Con eso fuera del camino, ahora vamos a echar un vistazo a un puñado de cosas que muestran cómo CoffeeScript hace que JavaScript sea más fácil de consumir!
Lo primero que debe saber es cómo CoffeeScript utiliza los espacios en blanco de manera efectiva para simplificar la sintaxis. Las personas con antecedentes en Python encontrarán esto trivial, pero para los demás, aquí hay una explicación rápida..
En primer lugar, no es necesario terminar cada línea con un punto y coma. Terminar una línea se interpreta automáticamente como el final de esa declaración. Por ejemplo, esto ...
números = [0, 1, 2, 3] nombre = "NetTuts +"
... se compila a esto:
nombre var, numeros; números = [0, 1, 2, 3]; name = "NetTuts +";
A continuación, te alegrará saber que puedes eliminar las llaves. Esos numerosos tirantes para abrir y cerrar un bloque? Todo está fuera. En CoffeeScript, utiliza la sangría de Python-esque para indicar el principio y el final de un bloque.
CoffeeScript no requiere paréntesis o llaves innecesarios.
Aquí hay un ejemplo rápido. Ignoremos todo menos la sangría por ahora. Iremos al resto un poco más adelante:
si se persiguenByCylons runForYourLife ()
... se compila hasta
if (chasedByCylons) runForYourLife ();
Si todavía estás un poco confundido, no te preocupes. La sintaxis comenzará a tener más sentido una vez que conozcamos mejor el idioma..
CoffeeScript proporciona una serie de alias para operadores y palabras clave para que el código sea más legible e intuitivo. Echemos un vistazo a algunos de ellos ahora.
Primero, los operadores de comparación:
Accentsconagua
es mapas para === no es compila a !== == y != compilar a === y !== respectivamente [como una buena práctica]Vamos a verlos en acción rápidamente..
si pant es onFire lookForWater () si el juego no es bueno, badMouth ();
... que compila a ...
if (pant === onFire) lookForWater (); if (game! == good) badMouth ();
Bastante fácil de leer, ¿no? Ahora, a cómo se asignan los operadores lógicos.
y mapas para && o es un alias para || no compila hasta ! Basándonos en nuestro código anterior:
si el pantalón está encendidoFire y no es un sueño LookForWater () si el juego no es bueno o haughtyDevs badMouth ();
... que compila a ...
if (pant === onFire &&! aDream) lookForWater (); if (game! == good || haughtyDevs) badMouth ();
Como ya has visto anteriormente, el básico si / else La construcción se comporta de la misma manera que en JavaScript normal, sin paréntesis y llaves. Veremos algunas variaciones a continuación..
si está cansado y aburrido duerme () else jog () // Raw JS debajo si (cansado y aburrido) sleep (); else jog ();
Y así es como se maneja el operador ternario:
actividad = si el domingo es Chilling else isWorking // Raw JS debajo de la actividad = domingo? isChilling: estrabajo;
Una mejora semántica adicional es con el a no ser que palabra clave. Esto funciona como el opuesto exacto de Si.
keepRunning () a menos que esté cansado keepWorking a menos que el enfoque sea extremadamente bajo
Y el JavaScript compilado ...
si (! cansado) keepRunning (); if (focus! == extremelyLow) keepWorking;
Cambiar declaraciones puede ser un poco obtuso en JavaScript. CoffeeScript proporciona una envoltura intuitiva alrededor de esta construcción.
Comienza con el cambiar palabra clave, como se esperaba, seguida de la variable cuyo valor estamos verificando. Cada caso o valor posible está precedido por el cuando palabra clave seguida de las instrucciones para ejecutar si es una coincidencia.
No hay necesidad de agregar un
descansodeclaración al final de cada caso: CoffeeScript lo hace automáticamente por usted.
cambie la hora cuando 6.00 wakeUp () jotDownList () cuando 9.00 luego comience a trabajar () cuando 13.00 luego coma () cuando 23.00 finishUpWork () duerma () de lo contrario no haga nada ()
La sintaxis debería ser bastante autoexplicativa si ya conoce el equivalente en JavaScript. El único punto a tener en cuenta aquí es el uso del entonces palabra clave. Se utiliza para separar la condición de la expresión sin iniciar una nueva línea. Usted puede usar entonces para las otras sentencias condicionales, así como también bucles.
Aquí está el JS que CoffeeScript genera para ti:
interruptor (tiempo) caso 6.00: wakeUp (); jotDownList (); descanso; caso 9.00: startWorking (); descanso; caso 13.00: comer (); descanso; caso 23.00: finishUpWork (); dormir(); descanso; por defecto: doNothing ();
Looping es otra construcción esencial para su código JavaScript típico. Ya sea en bucle a través de números en una matriz o nodos en el DOM, siempre necesita bucle a través de colecciones.
CoffeeScript proporciona una muy flexible mientras Bucle que puede ser modificado para funcionar como un genérico. para o hacer mientras lazo.
mientras trabaja> hora, luego freakOut () mientras que hora> work relax () mozyAround () // Raw JS while (work> time) freakOut (); while (tiempo> trabajo) relax (); mozyAround ();
hasta Es otra mejora semántica y es equivalente a mientras no. Un ejemplo rápido a continuación:
trabajar fuera () hasta energía < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Pasar sobre matrices es bastante fácil. Tendrá que utilizar el para ... en construir para pasar a través de la matriz. Déjame enseñarte como:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] para el sitio en el sitio de alerta de sitios
Si prefiere que las declaraciones estén en la misma línea:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] alerta al sitio para sitios en sitios
CoffeeScripts compila estos a básicos para bucles como tal. Tenga en cuenta que de acuerdo con las mejores prácticas, la longitud de la matriz se almacena en caché de antemano.
sitio var, sitios, _i, _len; sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; para (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Iterar sobre matrices asociadas [o hashes o diccionarios o pares clave-valor] es igual de fácil con el de palabra clave.
managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' para el sitio, gerente de alerta de gerentes manager "maneja" + sitio
Como se esperaba, lo anterior se compila en un bucle básico como se muestra a continuación:
gestor var, gestores, sitio; managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; para (sitio en gestores) manager = managers [sitio]; alerta (gestor + "gestiona" + sitio);
Crear y usar funciones es extremadamente fácil en CoffeeScript. Para definir una función, debe enumerar los parámetros necesarios y luego continuar con el cuerpo de la función. Aquí, déjame mostrarte cómo:
playing = (consola, game = "Mass Effect") -> alert "Playing # game en mi # console." jugando 'Xbox 360', 'New Vegas'
Esta es la sintaxis básica detrás de la creación y uso de funciones. El valor predeterminado para los parámetros se puede definir en línea. CoffeeScript genera el código para verificar si se ha pasado un valor o no.
Invocar una función es igual de fácil. No hay necesidad de paréntesis: pase los parámetros uno tras otro.
Como siempre, aquí está el código generado para su referencia:
var jugando; playing = function (consola, game) if (game == null) game = "Mass Effect"; alerta de devolución ("Playing" + game + "en mi" + console + "."); ; jugando ('Xbox 360', 'New Vegas'); A veces, es posible que no tenga otra opción que usar JavaScript en bruto dentro de su código de CoffeeScript. Con suerte, estos casos deberían ser muy lejanos, pero esto también se ha tenido en cuenta..
Puede inyectar JS en bruto en su código envolviéndolo con acentos graves, también conocidos como comillas inversas o backtick. Todo lo que se pase será intacto por el compilador de CoffeeScript..
rawJS = 'function () return someSuperComplexThingie; '// que te neta var rawJS; rawJS = function () return someSuperComplexThingie; ;
No les pasa nada, pueden quedarse exactamente donde están. CoffeeScript funciona perfectamente con cualquier biblioteca de terceros, grande o pequeña, porque simplemente se compila a JavaScript sin formato. Solo tendrá que reformatear y / o refactorizar su código muy ligeramente, pero aparte de eso, las incompatibilidades no deberían ser un punto de preocupación..
Así que en lugar de escribir esto:
$ (document) .ready (function () elemCollection = $ ('. collection'); para (i = 0; i<=elemCollection.length;i++) item = elemCollection[i]; // check for some random property here. I am skipping the check here colortoAdd = item.hasProperty()? yesColor : noColor; // I'm quite aware there are better ways to do this $(item).css ('background-color', colortoAdd); ); ... escribirías ...
$ (document) .ready -> elemCollection = $ ('. collection') para el elemento en elemCollection colortoAdd = if item.hasProperty () entonces yesColor else noColor $ (item) .css 'background-color', colortoAdd Y hemos llegado a su fin. No he cubierto una serie de temas de niveles superiores, por ejemplo, las clases, porque están más allá del alcance de un artículo introductorio. Busque algunos tutoriales avanzados de CoffeeScript en el futuro!
Creo que CoffeeScript ha cambiado la forma en que escribo JavaScript y, después de leer esto, espero que también haya cambiado el tuyo. Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificación y muchas gracias por leer.!
