CoffeeScript

CoffeeScript c'est quoi?
CoffeeScript est un petit langage qui compile du Javascript. Il vous permet d'écrire du javascript d'une manière plus efficace.
La règle d'or de CoffeeScript est "C'est juste du javascript". Le code compilé est du javascript, vous pouvez utiliser des librairies javascript existant dans vos projets CoffeeScript et vice-versa
CoffeeScript ne remplace pas le javascript, il n'est qu'un générateur de code javascript. Votre navigateur n'a besoin d'aucun plugin supplémentaire et vous pouvez utiliser vos librairies préférées comme javascript sans aucun problème! Il est donc aussi rapide que du simple javascript, voire plus rapide dans certains cas -car optimisé-.
Installer coffee-script
sudo npm install -g coffee-script
Compiler vos scripts CoffeeScript
Pour compiler vos fichier *.coffee, vous pouvez lancer la commande suivante:
coffee --compile --output lib/ src/
Mais si vous êtes une grosse feignasse comme moi, vous pouvez passer par Grunt qui le fera pour vous en temps réel
Apprendre CoffeScript
Vous pouvez apprendre ce langage en quelques heures (minutes) sa syntaxe est extrèmement simple
Initialiser une variable
# CoffeeScript firstname = "Olivier" lastname = "ENGEL"
# Javascript firstname = "Olivier"; lastname = "ENGEL";
Structure conditionnelles
# CoffeeScript is_superhero = true if lastname == "ENGEL" if firstname == "Olivier" and lastname == "ENGEL" console.log "Hey" else console.log "Shit" firstname = if firstname then "Zorro" else "Batman"
# Javascript if (lastname === "ENGEL") { is_superhero = true; } if (firstname === "Olivier" && lastname === "ENGEL") { console.log("Hey"); } else { console.log("Shit"); } firstname = firstname ? "Zorro" : "Batman";
Les fonctions
# CoffeeScript square = (x) -> x * x cube = (x) -> square(x) * x
# Javascript square = function(x) { return x * x; }; cube = function(x) { return square(x) * x; };
Array et Object
# CoffeeScript list = ["Masque", "Epée", "Cape"] obj = masque : true epee : false cape : false obj2 = { masque : true, epee : false }
# Javascript list = ["Masque", "Epée", "Cape"]; obj = { masque: true, epee: false, cape: false }; obj2 = { masque: true, epee: false };
array slicing et array splicing
# CoffeeScript a = [0,5,10,15,20,25,30,35,40,45,50] console.log a[0..5] # 0,5,10,15,20,25 console.log a[0...5] # 0,5,10,15,20 console.log a[3...-2] # 15,20,25,30,35,40 console.log a[-2..] # 45,50 console.log a[..] # copie! a[1..3] = [99,99,99] console.log a # 0,99,99,99,20,25,30,35,40,45,50
# Javascript a = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]; console.log(a.slice(0, 6)); console.log(a.slice(0, 5)); console.log(a.slice(3, -2)); console.log(a.slice(-2)); console.log(a.slice(0)); [].splice.apply(a, [1, 3].concat(ref = [99, 99, 99])), ref; console.log(a);
Les classes
# CoffeeScript class Person constructor: (options) -> {@name, @age, @height} = options getName : () -> @name setName : (name = "Jean-Claude") -> @name = name person = new Person name : "Olivier" person.setName 'Zorro'
# Javascript Person = (function() { function Person(options) { this.name = options.name, this.age = options.age, this.height = options.height; } Person.prototype.getName = function() { return this.name; }; Person.prototype.setName = function(name) { if (name == null) { name = "Jean-Claude"; } return this.name = name; }; return Person; })(); person = new Person({ name: "Olivier" }); person.setName('Zorro');
Liste en compréhension
# CoffeeScript rslt = (console.log i for i in obj if i isnt "cape")
# Javascript rslt = ((function() { var j, len, results; if (i !== "cape") { results = []; for (j = 0, len = obj.length; j < len; j++) { i = obj[j]; results.push(console.log(i)); } return results; } })());
Operateurs et Alias
CoffeeScript | JavaScript |
---|---|
is | === |
isnt | !== |
not | ! |
and | && |
or | || |
true, yes, on | true |
false, no, off | false |
@, this | this |
of | in |
in | no JS equivalent |
a ** b | Math.pow(a, b) |
a // b | Math.floor(a / b) |
a %% b | (a % b + b) % b |
CoffeeScript et AngularJS
Si vous aimez travailler avec AngularJS et CoffeeScript voici quelques morceaux de code qui pourront vous aider:
Exemple de Controller:
app = angular.module 'app', [] # Pour symfony app.config ($interpolateProvider) -> $interpolateProvider.startSymbol('||') $interpolateProvider.endSymbol('||') class FrontController @$inject: ['$scope'] @products = [] constructor: (@scope) -> @scope.name = 'demo value' @scope.login = @login @scope.products = @get_products() @scope.add_product = @add_product login: => console.log "Login..." @scope.name = "login..." true get_products: => products = [] products.push {name: 'Masque', price : 125.5} products.push {name: 'Epee', price: 20.05} products add_product: => @scope.products.push {name:'Velo', price: 145} true app.controller 'FrontController', FrontController
Convertir un script Javascript en COFFEE
Dans certains cas vous devez utiliser des script js tout fait. Convertir à la main le Javascript en .coffee peut vite devenir long et ennuyeux. Heureusement il existe des outils qui le feront pour vous: js2coffee
sudo npm install --g js2coffee
Et pour convertir votre script:
js2coffee script.js > script.coffee
Convertion JS TO COFFEE web
Vous pouvez trouver la version web de cet outil: js2tocoffee
UNE QUESTION SUR L'ARTICLE?
Initiation
HTML

CSS

PHP

PHP Avancé

Bootstrap

javascript / jQuery

MySQL

Symfony 2

Prestashop
