Share
Même si CoffeeScript est un nouveau langage, vous l’apprenerez très vite. Vous devriez, étant donné que JavaScript n’affiche que des vêtements voyants. Il se lit comme Ruby ou Python, mais compile en JavaScript pur et non-moelleux. Aujourd'hui, nous allons voir pourquoi tout le monde parle de CoffeeScript.
Avec l'avènement de puissants moteurs JavaScript, tels que V8, JavaScript a perdu son stigmatisme d'outil gimped pour les interactions juvéniles et s'est transformé en une véritable puissance. Il a même sauté d'applications côté client au côté serveur, par exemple, node.js. Le fait qu’elle adhère à une idéologie assez astucieuse basée sur un prototype ne lui fait pas de mal non plus. Il ne fait aucun doute que JavaScript est effectivement un langage essentiel maintenant et dans un avenir proche..
Mais j'ai toujours senti la syntaxe elle-même un peu compliquée. Après avoir travaillé avec un mélange de Ruby et de Python au cours des deux dernières années, je trouve que la syntaxe verbeuse infusée par des points-virgules, dépendante de JavaScript, est fastidieuse. Et d'après ce que je peux comprendre, je ne suis pas le seul à ressentir cela. C'est ici que CoffeeScript vient à la rescousse!
CoffeeScript compile jusqu'à JS brut.
CoffeeScript est essentiellement juste une réécriture syntaxique de JavaScript. La langue principale reste la même, avec de petites améliorations sémantiques. La syntaxe est modifiée, calquée sur Python et Ruby..
N'oubliez pas que le compilateur CoffeeScript génère un code JavaScript propre qui non seulement suit les meilleures pratiques et est parfaitement lisible, mais transmet également JSLint. Cela signifie que vous n'avez pas à vous soucier de la compatibilité en bout de ligne. Dans le pire des cas, ce projet mourant, vous pouvez simplement prendre le JS vierge que CoffeeScript génère et continuer avec votre code. Vous n'êtes pas enfermé dans cet environnement.
Cela peut sembler un concept extraterrestre, mais sous le parapluie du développement Web, nous avons déjà constaté notre part équitable de cette idéologie. HAML n’est qu’une nouvelle façon d’écrire HTML, tandis que SASS fait de même pour CSS. Tous nettoient la structure et la syntaxe de leurs langues, ce qui les rend plus faciles à travailler et améliore ainsi notre productivité..
Vous vous demandez probablement à quoi ressemble le code lui-même, voici donc un aperçu rapide:
index = (liste, cible) -> [bas, haut] = [0, list.length] tant que bas < high mid = (low + high) >> 1 val = list [mid] return mid si val est la cible si val < target then low = mid + 1 else high = mid return -1
Ceci est une implémentation rapide d'une recherche binaire. N'essayez pas d'analyser le code lui-même maintenant. Essayez simplement de vous familiariser avec la syntaxe.
Vous trouverez ci-dessous le code JavaScript généré par CoffeeScript:
indice var; index = fonction (liste, cible) var haut, bas, moyen, val, _ref; _ref = [0, list.length], low = _ref [0], high = _ref [1]; tandis que < high) mid = (low + high) >> 1; val = list [mid]; if (val === target) return mid; if (val < target) low = mid + 1; else high = mid; return -1; ;
Voici quelques avantages et inconvénients rapides de l’utilisation de CoffeeScript. Ce n'est pas exhaustif, mais je pense que cela suffit pour avoir un aperçu du système..
Il existe bien sûr de nombreux autres points, notamment des améliorations sémantiques et syntaxiques..
Les méthodes officielles pour commencer comprennent un utilitaire de ligne de commande qui s'exécute sous node.js. Il suffit de télécharger le source et de l'installer. Rien de plus à guider ici. Obtenez l'utilitaire node.js et utilisez npm install coffee-script [ou pour la source, installation de bacs / gâteaux] installer et commencer.
La situation avec Windows est légèrement plus compliquée. Il n’existe pas de moyen simple d’obtenir node.js ou le code source installé sous Windows [en dehors de Cygwin]. Ne vous inquiétez jamais. Un certain nombre de personnes entreprenantes ont écrit des compilateurs qui fonctionnent de manière native sous Windows. J'ai inclus quelques-uns ci-dessous:
Notez que le compilateur, sous la forme JavaScript compilée, est également fourni avec la source, si cela vous intéresse. C'est présent sous le supplémentaire répertoire avec un nom évident.
Ceci étant dit, nous allons maintenant examiner quelques éléments qui montrent comment CoffeeScript facilite l'utilisation de JavaScript.!
La première chose que vous devez savoir, c'est comment CoffeeScript utilise efficacement les espaces pour simplifier la syntaxe. Les personnes ayant une formation en python trouveront cela trivial, mais pour les autres, voici une explication rapide.
Tout d'abord, vous n'avez pas besoin de terminer chaque ligne par un point-virgule. La fin d'une ligne est automatiquement interprétée comme la fin de cette instruction. Par exemple, cela…
nombres = [0, 1, 2, 3] name = "NetTuts +"
… Compile jusqu'à ceci:
nom var, nombres; nombres = [0, 1, 2, 3]; name = "NetTuts +";
Ensuite, vous serez heureux de savoir que vous pouvez vous passer des accolades. Ces nombreux accolades pour ouvrir et fermer un bloc? Tout est sorti. Dans CoffeeScript, vous utilisez l'indentation Python-esque pour indiquer le début et la fin d'un bloc..
CoffeeScript ne nécessite pas de parenthèses inutiles ou d'accolades.
Voici un exemple rapide. Ne tenez pas compte de tout sauf de l'indentation pour le moment. Nous reviendrons au reste un peu plus tard:
si chasedByCylons runForYourLife ()
… Compile jusqu'à
if (chasedByCylons) runForYourLife ();
Si vous êtes encore un peu confus, ne vous inquiétez pas. La syntaxe deviendra plus logique une fois que nous connaîtrons mieux la langue.
CoffeeScript fournit un certain nombre d'alias aux opérateurs et mots-clés pour rendre le code plus lisible et intuitif. Jetons un coup d'oeil à certains d'entre eux maintenant.
Tout d'abord, les opérateurs de comparaison:
Accentsconagua
est cartes à === n'est pas compile pour !== == et != compiler pour === et !== respectivement [comme meilleure pratique]Voyons-les en action rapidement.
si pant est allumé LookForWater () si le jeu n'est pas bon badMouth ();
… Qui compile pour…
if (pant === onFire) lookForWater (); if (jeu! == bien) badMouth ();
Assez facile à lire, non? Passons maintenant au mappage des opérateurs logiques..
et cartes à && ou est un alias pour || ne pas compile jusqu'à ! Construire sur notre code précédent:
si pant est allumé et non pas un rêve lookForWater () si le jeu n'est pas bon ou hautainDevs badMouth ();
… Qui compile pour…
if (pant === onFire &&! aDream) lookForWater (); if (game! == good || haughtyDevs) badMouth ();
Comme vous l'avez déjà vu ci-dessus, la base sinon construct se comporte comme en JavaScript normal, sans les parenthèses et les accolades. Nous allons regarder quelques variations ci-dessous.
si fatigué et ennuyé dormir () else jog () // Raw JS ci-dessous si (fatigué && ennuyé) sleep (); else jog ();
Et voici comment l’opérateur ternaire est traité:
activité = si dimanche alors isChilling d'autre isWorking // Raw JS ci-dessous activité = dimanche? isChilling: isWorking;
Une amélioration sémantique supplémentaire est la sauf si mot-clé. Cela fonctionne comme l'opposé exact de si.
keepRunning () sauf si fatigué keepWorking sauf si la mise au point est extrêmement lente
Et le JavaScript compilé…
si (! fatigué) keepRunning (); if (focus! == extrêmementLow) keepWorking;
Les instructions Switch peuvent être un peu obtuses en JavaScript. CoffeeScript fournit un wrapper intuitif autour de cette construction.
Ça commence par le commutateur mot-clé, comme prévu, suivi de la variable dont nous vérifions la valeur. Chaque cas ou valeur possible est précédé du quand mot-clé suivi des instructions à exécuter s'il s'agit d'une correspondance.
Il n'y a pas besoin d'ajouter un
Pausedéclaration à la fin de chaque déclaration de cas: CoffeeScript le fait automatiquement pour vous.
changer l'heure quand 6.00 wakeUp () jotDownList () quand 9.00 puis startWorking () quand 13.00 puis eat () quand 23.00 finishUpWork () sleep () else doNothing ()
La syntaxe devrait être assez explicite si vous connaissez déjà l'équivalent en JavaScript. Le seul point à noter ici est l'utilisation de la puis mot-clé. Il est utilisé pour séparer la condition de l'expression sans commencer une nouvelle ligne. Vous pouvez utiliser ensuite pour les autres instructions conditionnelles ainsi que les boucles.
Voici le JS que CoffeeScript génère pour vous:
commutateur (heure) cas 6.00: wakeUp (); jotDownList (); Pause; cas 9.00: startWorking (); Pause; cas 13.00: manger (); Pause; cas 23.00: finishUpWork (); dormir(); Pause; défaut: doNothing ();
Le bouclage est une autre construction essentielle pour votre code JavaScript typique. Qu'il s'agisse de parcourir des nombres dans un tableau ou des nœuds du DOM, vous avez toujours besoin de parcourir des collections..
CoffeeScript fournit un très flexible tandis que boucle qui peut être modifiée pour fonctionner comme un générique pour ou faire pendant boucle.
while work> time, puis freakOut () tandis que time> work relax () mozyAround () // Raw JS while (work> time) freakOut (); while (time> work) relax (); mozyAround ();
jusqu'à ce que est une autre amélioration sémantique et est équivalent à alors que non. Un exemple rapide ci-dessous:
workOut () jusqu'à énergie < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Faire une boucle sur les tableaux est assez facile. Vous aurez besoin d'utiliser le pour… dans construire pour parcourir le tableau. Laisse moi te montrer comment:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] pour le site dans le site d'alerte de sites
Si vous préférez que les déclarations soient dans la même ligne:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] site d'alerte pour le site sur les sites
CoffeeScripts les compile en bases pour des boucles comme ça. Notez que, conformément aux meilleures pratiques, la longueur du tableau est préalablement mise en cache..
var site, sites, _i, _len; sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; pour (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Itérer sur des tableaux d’associés [ou des hachages, des dictionnaires ou des paires clé-valeur] est tout aussi facile avec la de mot-clé.
managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' pour le site, gestionnaire de gestionnaires alert manager + "manage" + site
Comme prévu, ce qui précède est compilé en une boucle for de base, comme indiqué ci-dessous:
var manager, gestionnaires, site; managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; pour (site dans les gestionnaires) manager = managers [site]; alerte (gestionnaire + "gère" + site);
Créer et utiliser des fonctions est extrêmement facile sous CoffeeScript. Pour définir une fonction, vous listez les paramètres qu’elle prend puis vous passez au corps de la fonction. Ici, laissez-moi vous montrer comment:
playing = (console, game = "Mass Effect") -> alert "Jouer # jeu sur ma # console." jouer à 'Xbox 360', 'New Vegas'
C'est la syntaxe de base derrière la création et l'utilisation de fonctions. La valeur par défaut pour les paramètres peut être définie en ligne. CoffeeScript génère le code pour vérifier si une valeur a été transmise ou non.
Invoquer une fonction est tout aussi simple. Pas besoin de parenthèses: passez les paramètres les uns après les autres.
Comme toujours, voici le code généré pour votre référence:
var jouer; jouer = fonction (console, jeu) if (game == null) game = "Mass Effect"; return alert ("Jeu" + jeu + "sur mon" + console + "."); ; jouer ('Xbox 360', 'New Vegas'); Parfois, vous n'avez peut-être d'autre choix que d'utiliser du code JavaScript brut dans votre code CoffeeScript. Espérons que ces cas seront rares et rares, mais cela a également été pris en compte..
Vous pouvez injecter du code JS brut dans votre code en l’enveloppant d’accents graves, également appelés backcote ou backtick. Tout ce qui est passé ainsi sera complètement épargné par le compilateur CoffeeScript.
rawJS = 'function () return someSuperComplexThingie; '// quels filets avez-vous var rawJS; rawJS = function () return someSuperComplexThingie; ;
Rien ne leur arrive, ils peuvent rester exactement où ils sont. CoffeeScript fonctionne de manière transparente avec n'importe quelle bibliothèque tierce, grande ou petite, car il compile simplement en JavaScript brut. Vous aurez juste à reformater et / ou refactoriser votre code très légèrement, mais à part cela, les incompatibilités ne devraient pas être un sujet de préoccupation.
Donc au lieu d'écrire ceci:
$ (document) .ready (fonction () elemCollection = $ ('. collection'); pour (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); ); … Tu écrirais…
$ (document) .ready -> elemCollection = $ ('. collection') pour un élément dans elemCollection colortoAdd = if item.hasProperty () then yesColor sinon noColor $ (item) .css 'background-color', colortoAdd Et nous sommes arrivés à la fin. Je n'ai pas abordé un certain nombre de sujets de niveaux supérieurs, des classes par exemple, car ils dépassent largement le cadre d'un article d'introduction. Recherchez des tutoriels avancés sur CoffeeScript sur la route!
Je pense que CoffeeScript a changé la façon dont j'écris le JavaScript et, après l'avoir lu, j'espère que cela a aussi changé le vôtre. Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bon codage et merci beaucoup pour la lecture!
