LearnThe Absolute Beginner’s Guide to CoffeeScript

CoffeeScript est devenu de plus en plus populaire au cours des deux dernières années en raison de son adoption par le nœud.communautés js et Rails. Jetons un coup d’œil à la raison pour laquelle il est devenu le langage incontournable lorsque les gens veulent écrire du JavaScript dans leurs applications.

Qu’est-ce que CoffeeScript ?

CoffeeScript est un langage compilé en JavaScript. Code dans.les fichiers coffee ne sont pas interprétés au moment de l’exécution, comme JavaScript, mais sont compilés dans.fichiers js.

Si vous écrivez pour JavaScript pour le nœud.js ou l’implémentation de n’importe quel navigateur donné, CoffeeScript peut être écrit pour toutes les saveurs de JavaScript.

Pourquoi CoffeeScript?

Dans le passé, JavaScript n’avait pas la réputation la plus stellaire en raison de la mentalité de copier-coller des années 90 et du début des années 2000, il semblait que seuls quelques-uns avaient une idée de ce qui se passait. Il était considéré comme un langage pas si « sérieux ». Cependant, JavaScript en tant que langage a beaucoup à offrir et possède de superbes fonctionnalités.

CoffeeScript utilise les puissantes fonctionnalités de JavaScript sans apprendre les fonctionnalités moins connues de JavaScript en ajoutant du « sucre syntaxique » à JavaScript. CoffeeScript n’a pas les deux-points et les accolades, une syntaxe similaire à celle de Python et Ruby.

Cela signifie que vous pouvez écrire moins de code et faire les choses plus rapidement. Il facilite également la lecture et la maintenance.

En raison des optimisations utilisées par CoffeeScript, lorsqu’il est compilé, le JavaScript résultant est tout aussi performant ou, dans certains cas, encore plus performant que le code écrit à la main.

Vous pouvez en apprendre beaucoup sur JavaScript en regardant le JavaScript que CoffeeScript compile. S’il y a quelque chose de nouveau que vous voyez là-bas, faites des recherches et voyez pourquoi CoffeScript compile de cette façon plutôt que ce que vous avez l’habitude de voir.

Installation de CoffeeScript

Installons CoffeeScript pour que vous puissiez suivre. CoffeeScript est un nœud.paquet js. Cela dépend donc du nœud.js et le gestionnaire de paquets (npm).

Sur le nœud OS X

.js peut être installé à l’aide de Homebrew, un gestionnaire de paquets open source pour OS X. Vous pouvez consulter le processus d’installation de Homebrew ici.

Assurez-vous que votre Homebrew est à jour en tapant brew update dans votre terminal.

La formule Homebrew pour Node.js est node. Donc, pour installer le nœud.js vous tapez brew install node dans votre terminal. Suivez les instructions supplémentaires qui apparaissent si vous devez modifier PATHs ou quelque chose comme ça.

Puis tapez npm install -g coffee-script pour l’installer globalement.

Sous Windows

Visitez Node.site Web de js et appuyez sur le bouton « Installer ». Il devrait détecter automatiquement votre saveur de Windows que vous utilisez et un programme d’installation commencera à télécharger.

Suivez le processus d’installation.

Une fois qu’il est installé, ouvrez votre invite de commande et tapez npm install -g coffee-script pour l’installer globalement.

Et enfin

Tapez coffee -v dans votre ligne de commande pour voir qu’il a été installé correctement.

Utilisation de la ligne de commande

Le compilateur coffee peut être utilisé de plusieurs manières. Voici un couple pour voir ce qui est disponible.

Exécutez et compilez

La commande suivante compilera tous vos fichiers .coffee dans un dossier appelé coffeescripts en fichiers .js dans une arborescence parallèle dans le javascripts div> dossier.

coffee -o javascripts/ -c coffeescripts/

Avertissement

L’option -c signifie compiler et -o signifie le dossier de sortie. Notez que la commande est sortie puis compilée. En effet, si vous changez de commande, cela ne fonctionne pas!

Watcher

Exécutant la commande ci-dessus chaque fois que vous souhaitez compiler des fichiers CoffeeScript, il existe donc une autre option pratique à utiliser, -w.

coffee -w -o javascripts/ -c coffeescripts/

L’observateur écoute les modifications apportées aux fichiers du dossier coffeescripts et les compile à la volée.

Si vous ajoutez un nouveau fichier au dossier coffeescripts, vous devez compiler, mais si vous ajoutez un nouveau dossier et un fichier CoffeeScript à l’intérieur, il ne sera pas compilé. Cela pourrait changer dans les versions ultérieures.

Joindre des fichiers

Vous pouvez également compiler tous vos fichiers .coffee en un seul fichier JavaScript. Cela réduira le nombre de requêtes HTTP qu’un navigateur doit effectuer et améliorera les performances. Pour ce faire, utilisez l’option -j comme ceci :

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

Le * est un opérateur générique.

REPL

Si vous tapez coffeesans aucune option, un shell interactif s’ouvre. Ceci est similaire à irb dans Ruby. C’est un excellent outil pour les choses dans la console et effectuer des expériences rapides.

Mise en surbrillance de l’éditeur de texte

Si vous allez coder en CoffeeScript, la meilleure chose à faire est d’avoir une coloration syntaxique.

TextMate

Jeremy Ashkenas, l’inventeur de CoffeeScript, a créé un ensemble TextMate pratique. Pour les instructions d’installation, cliquez ici.

Sublime Text 2

Sublime Text 2 a un plugin créé par l’utilisateur de GitHub Xavura. Vous pouvez l’installer via le contrôle de package Sublime, si vous l’avez déjà.

Les Bonnes choses alias La syntaxe

Variables

Les variables dans CoffeeScript ne nécessitent pas le mot clé var. Nommez simplement votre variable, un signe égal, puis la valeur.

year = 1985speed = 88

Chaînes

Les chaînes sont déclarées avec des guillemets comme dans la plupart des autres langues.

first_name = "Marty"

Pour joindre ou concaténer des chaînes, vous pouvez les lister l’une après l’autre avec un symbole plus entre les deux, comme ceci:

full_name = first_name + " McFly"

Vous pouvez également inclure le symbole de hachage (#), suivi d’accolades, et dans ceux-ci la variable de chaîne .

full_name = "#{first_name} McFly"

Les deux exemples ci-dessus créeraient la chaîne Marty McFly.

Ce dernier type d’interpolation de chaîne ne fonctionne que lorsque vous utilisez des guillemets doubles. Si vous utilisez des guillemets simples, le texte s’affiche « tel quel ». Les chaînes de guillemets simples sont des chaînes littérales.

full_name = '#{first_name} McFly'

Donc ce qui précède sera la chaîne de #{first_name} McFly. Cela reflète le comportement.

Fonctions

Les fonctions sont déclarées en nommant la fonction, le signe égal, puis un symbole de fonction spécial (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

Nous n’avons pas utilisé le mot clé return car chaque fonction de CoffeeScript renvoie le résultat de la dernière ligne de code.

Les fonctions à lignes multiples sont écrites sur plusieurs lignes, chaque ligne après la déclaration ayant un espace blanc devant elle.

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

Cela définirait l’année sur 1885 à chaque fois. Si nous voulons que l’année soit beaucoup plus flexible mais qu’elle ait une valeur par défaut, nous pouvons l’inclure dans la déclaration de méthode comme ceci:

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

Cela signifie que nous pouvons alors l’appeler avec une valeur du speedle year sera toujours par défaut à 1885.

 initialize_time_circuits(88)

Vous pouvez également appeler des méthodes sans utiliser de parenthèses. Ce qui précède peut également être écrit comme suit:

 initialize_time_circuits 88

Tableaux

Il existe plusieurs façons d’initialiser et de déclarer des tableaux dans CoffeeScript. Vous avez probablement l’habitude de voir des tableaux déclarés avec des crochets et des valeurs séparées par des virgules.

 mcflys = 

Vous pouvez également déclarer des tableaux sur plusieurs lignes comme ceci:

 mcflys = 

Vous devez avoir des espaces blancs sur chaque ligne.

En option, vous pouvez supprimer la virgule de fin de chaque ligne.

 mcflys = 

Vous pouvez également utiliser une combinaison de ces deux styles de déclaration.

L’exemple suivant equivalent

woah = 

is est l’équivalent de :

woah = 

Qui peut être plus ou moins lisible selon votre application. CoffeeScript vous permet de le faire de différentes manières pour répondre à vos besoins.

Objets

Les littéraux d’objets ou les hachages peuvent être déclarés comme leurs homologues JavaScript et d’autres manières géniales.

Étant donné le JSON suivant

you vous pouvez supprimer les virgules et les accolades:

Tant que vous vous indentez avec un espace blanc, la structure est imbriquée comme prévu.

Les plages

Sont déclarées par deux entiers séparés par deux points, entre crochets.

days = 

Les plages ne sont pas un type d’objet standard en Javascript, elles sont donc compilées en tableaux.

Pour obtenir une sous-section d’un tableau, vous pouvez également passer dans une plage. Vous voulez obtenir des jours de tuesday_to_friday où le lundi est 1 et le dimanche est 7? Puisque les tableaux sont indexés à base de zéro, nous commencerions à 1 et finissions à 4.

days = tuesday_to_friday = days

Vous pouvez également remplacer des sections entières de tableaux de la même manière.

Le tableau suivantModif

days = 

Modifie le tableau days pour qu’il soit .

Vous pouvez également utiliser des plages pour le compte à rebours, par exemple serait 100.

Splat

Un splat est un moyen pratique d’accepter plusieurs valeurs comme arguments des méthodes.

Dans l’exemple suivant, nous voulons attribuer des points de félicitations à un groupe d’utilisateurs du forum pour le nombre de publications dans une semaine donnée.

La première personne obtient 10 points, la deuxième en obtient 6, la troisième en obtient 2 et chacun d’eux obtiendra un seul point.

Créons une fonction, giveKudos Avec firstsecond, et third comme paramètres. Pour le reste, utilisez bien un splat, qui est le nom de la variable suivie de 3 périodes. Dans la méthode giveKudos appelons une addKudosToUser non implémentée qui prend deux paramètres, l’utilisateur et les points à ajouter. Nous n’allons pas nous soucier de la mise en œuvre, c’est juste à des fins d’illustration.

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

Ensuite, nous pouvons utiliser un for in pour faire une boucle sur le rest.

Étant donné que nous avons un tableau d’utilisateurs:

users = 

Nous voulons que Pasan obtienne 10 points, Amit en obtienne 6, Jim en obtienne 2, puis le reste en obtienne 1.

Nous devons transmettre les utilisateurs avec les périodes in à la méthode pour affecter correctement les valeurs du tableau aux paramètres comme ceci :

giveKudos users...

Sans ces périodes, users get est affecté au paramètre first et undefined au reste.

Classes

Les classes peuvent être déclarées trivialement en CoffeeScript, ce qui est un contraste rafraîchissant avec le JavaScript beaucoup plus verbeux.

Écrivez d’abord le mot clé class, suivi du nom de votre classe.

Les méthodes, y compris la méthode constructeur, sont écrites avec le nom de la méthode suivi d’un deux-points. Un espace blanc est nécessaire avant chaque nom de méthode. Vous pouvez ensuite utiliser l’opérateur de fonction (->).

class TimeMachine constructor: ->

Pour instancier une instance d’un objet, utilisez le mot clé new suivi du nom de la classe.

time_machine = new TimeMachine

Variables d’instance

Les variables d’instance commencent par un symbole @. Nous pouvons donc avoir un pilote

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

Vous pouvez également y accéder via la notation par points.

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

Dans l’exemple ci-dessus, la chaîne H. G. Wells serait imprimée sur la console.

Au lieu de définir @pilot = pilotvous pouvez l’écrire en raccourci comme ceci:

class TimeMachine constructor: (@pilot) ->

Héritage de classe

Pour écrire une sous-classe, vous pouvez utiliser extends comme ceci:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

Disons que TimeMachine a une méthode go avec un paramètre qui est déconnecté lorsque la Machine temporelle est sur le point de voyager dans le temps.

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

Maintenant, pour chaque implémentation time machine, appelons la méthode super.

Donc, appeler go() sur les instances des deux machines temporelles imprimera son propre son respectif.

Syntaxe générale

Avec CoffeeScript, votre code ressemble plus à une phrase en anglais:

light_bulbs() if switch is on

Qui est le même que:

light_bulbs() unless switch is not on

Bien que ce dernier soit plus difficile à analyser que le premier, il vous montre la portée du nouveau sucre.

Voici un tableau des équivalents de la page de documentation CoffeeScript sur les opérateurs et les alias.

CoffeeScript	JavaScript
est	===
n’est pas	!==
pas	!
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 (?).

Disons si un user n’est pas encore connecté et n’a pas encore été défini. Vous voulez que la fonction de connexion soit appelée si le user n’est pas présent, utilisez simplement l’opérateur Existentiel comme ceci :

login() if not user?

Vous pouvez également définir des valeurs par défaut comme ceci :

year ?= 1885

Vous pouvez utiliser l’Opérateur Existentiel de la même manière à un opérateur ternaire. L’exemple suivant définirait le message d’accueil comme étant soit message, sinon undefined ou la chaîne ‘ »Bonjour, Monde! ».

greeting = message ? "Hello, World!"

Enfin, il existe une variante d’accesseur que vous pouvez utiliser pour absorber les références null lorsque vous enchaînez des propriétés ensemble.

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

Donc, au lieu de lever un TypeError cela retournerait undefined.

Compréhensions

Les compréhensions peuvent rendre votre code plus lisible. Dans notre exemple de félicitations, nous avions la boucle for sur deux lignes, alors que nous aurions pu l’écrire sur une ligne comme celle-ci:

Une autre caractéristique intéressante de la boucle sur des choses dans CoffeeScript est que la boucle renvoie un tableau des résultats de cette boucle. Disons que je veux compter de 0 à 100 par multiples de 10. Tout ce que je fais est de compléter ma boucle avec une affectation de variable comme ceci:

multiples = for num in num * 10

En ajoutant des parenthèses, vous pouvez également l’amener sur une ligne!

multiples = (num * 10 for num in )

Conclusion

Woah! C’était beaucoup à prendre, mais comme vous pouvez le voir, CoffeeScript est plein de syntaxe sucrée savoureuse. Pourquoi ne pas lui donner un coup de foudre dans votre prochain projet JavaScript et voir ce qu’il compile sous le capot?

• guide du débutant au coffeescript
• coffeescript
• apprendre la programmation
• créer un site web