Download - Coffee script
C'EST QUOI ?Une "surcouche" javascriptLangage jeune (déc 2009)
Une syntaxe inspiré de Python, Ruby et Haskell
POURQUOI L'UTILISER ?Rendre le code plus lisible (donc plus maintenable)
Rapidité de développementEviter les nombreuses erreurs possible en JS
EN PRATIQUE1. Ecrire son code2. Compiler en Javascript
3. Inclure son fichier js
coffee --compile file.coffee
coffee --watch --compile file.coffee
VARIABLES
DÉFINIR UNE VARIABLE
bla = "une variable"
var bla;
bla = "une variable";
matrix = [ 1, 0, 1 0, 1, 0 1, 0, 1]
map = a: 1 b: 2 c: 3
var map, matrix;
matrix = [1, 0, 1, 0, 1, 0, 1, 0, 1];
map = { a: 1, b: 2, c: 3};
TESTER UNE VARIABLE
if bla?
if (typeof bla !== "undefined" && bla !== null)
AFFECTER PLUSIEURS VARIABLES
Output
[var1, var2..., var3] = [1, 2, 3, 4, 5]
var var1, var2, var3, _i, _ref, __slice = [].slice;
_ref = [1, 2, 3, 4, 5], var1 = _ref[0], var2 = 3 <= _ref.length ? __slice.call(_ref, 1, _i = _ref.length - 1) : (_i = 1, []), var3 = _ref[_i++];
var1 => 1var2 => [2, 3, 4]var3 => 5
CONDITIONS
MOT CLÉ
if / unless is / isnt
if var1 is var2 console.log var1
console.log var1 unless var1 isnt var2
if (var1 === var2) { console.log(var1);}
CONDITIONS MULTIPLES
Les "classiques" && et || sont remplacés par 'and' et 'or'
if a and b or c
if (a && b || c)
if 200 < a < 300
if (200 < a && a < 300)
CONDITIONS TERNAIRES
if var1 is var2 then console.log "=" else console.log "!="
var3 = if var1 is var2 then 3 else 4
var var3;
if (var1 === var2) { console.log("=");} else { console.log("!=");}
var3 = var1 === var2 ? 3 : 4;
BOUCLES
COLLECTIONLe mot clé in pour itérer sur les éléments d'une collection
for obj in collection console.log obj
console.log obj for obj in collection
var obj, _i, _len;
for (_i = 0, _len = collection.length; _i < _len; _i++) { obj = collection[_i]; console.log(obj);}
FILTRESLe mot clé when pour mettre une condition à notre boucle
for obj in collection when obj isnt anotherObj console.log "object: #{obj}"
var obj, _i, _len;
for (_i = 0, _len = collection.length; _i < _len; _i++) { obj = collection[_i]; if (obj !== anotherObj) { console.log("object: " + obj); }}
WHILE
i = 0while i < 10 i++
i = 0until i >= 10 i++
var i;
i = 0;
while (i < 10) { i++;}
i = 0;
while (!(i >= 10)) { i++;}
FONCTIONS
FONCTIONS ANONYMES
() -> console.log "fonction anonyme"
(function() { return console.log("fonction anonyme");});
$.ajax url: "/" success: (data, textStatus, jqXHR) -> console.log data
FONCTIONS
sum = (collection=[]) -> res = 0 res += elem for elem in collection res
var sum;
sum = function(collection) { var elem, res, _i, _len; if (collection == null) { collection = []; } res = 0; for (_i = 0, _len = collection.length; _i < _len; _i++) { elem = collection[_i]; res += elem; } return res;};
PORTÉ DES VARIABLES
a = -> var1 = 12 b = -> var2 = 23 var1 = 13 return
var a;
a = function() { var b, var1; var1 = 12; return b = function() { var var2; var2 = 23; var1 = 13; };};
CLASSES
DÉFINIR UNE CLASSE
class Ball constructor: (@x=0, @y=0) ->
move: (@x, @y) ->
var Ball;Ball = (function() {
function Ball(x, y) { this.x = x != null ? x : 0; this.y = y != null ? y : 0; }
Ball.prototype.move = function(x, y) { this.x = x; this.y = y; };
return Ball;})();
HÉRITAGE
class Object constructor: (@x=0, @y=0) -> move: (@x, @y) ->
class Ball extends Object constructor: (@x, @y, @radius) -> super @x, @y
explode: -> # do stuff
ball = new Ball()ball.move 10, 10ball.explode()
PROBLÈMES
WRAP
Tous les fichiers compilés sont englobés dans une fonction anonyme (par fichier)
SOLUTION
Compiler avec l'option
Rendre accessible les variables dans window
Joindre les fichiers
--no-wrap
window.Ball = class Ball ...
window.Ball = Ball
--join
CONTEXT
Quand une fonction est appelée par un context différent
SOLUTION
A la mano :'(
$("#ball").click -> @explode() # erreur car @ remplacé par "this" (le DOM cliqué) $(this).remove() # ok
$("#ball").click => @explode() # ok $(this).remove() # erreur car this est l'object Ball
_this = @ $("#ball").click -> _this.explode() $(this).remove()
PAS DE MACROS :(
#> DEBUG = yes#> SWAP = (var1, var2) ->#> tmp = var1#> var1 = var2#> var2 = tmp
a = 2b = 3SWAP a, b#> if DEBUG is yes console.log a, b#> else $("output").html "a: #{a}, b: #{b}"
# Avec DEBUG is yesa = 2;b = 3;tmp = a;a = b;b = tmp;console.log(a, b);
# Avec DEBUG is noa = 2;b = 3;tmp = a;a = b;b = tmp;$("output").html("a: " + a + ", b:" + b);
EQUIVALENT À COFFEESCRIPTTypeScript (Microsoft)Sweetjs (Mozilla)Dart (Google)
LIENS UTILEShttp://js2coffee.org/http://coffeescript.org/https://github.com/jashkenas/coffeescript
ANTHONY ESTEBE
“DÉVELOPPEUR WEB FREELANCE
twitter: @antho1404skype: antho1404github: antho1404
site: ”
http://anthonyestebe.com