昨天在编译ABPlayerHTML5的时候无意间发现了CoffeeScript这语言,以前虽然有过听说,但是都不屑的无视掉了这门语言。昨天在我看到这门语言的时候深深的被它吸引了,这种触动就和我第一次接触jQuery的时候一样,这给开发者的体验简直能用“感动”这个词来描述。
CoffeeScript是一种脚本语言没错,但是它还是需要编译的。它拥有一个javascript写的编译器用来把CoffeeScript编译到JavaScript。你可以在你的浏览器里面进行CoffeeScript的编译,但是更常见的做法是通过node.js来编译你的CoffeeScript。在node.js安装你的CoffeeScript是非常简单的一件事情:CoffeeScript已经可以直接通过npm获得你只需要下面一条指令就能获得最新稳定版的CoffeeScript
sudo npm install -g coffee-script
CoffeeScript里面你不需要特别的定义变量,一切变量的作用域都会自动的在最小的范围内。不像JavaScript,一切不声明var的变量都是全局变量。CoffeeScript会自动的声明变量。
# 赋值:
number = 42
opposite = true
# 条件:
number = -42 if opposite
# 函数:
square = (x) -> x * x
# 数组:
list = [1, 2, 3, 4, 5]
# 对象:
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
# Splats:
race = (winner, runners...) ->
print winner, runners
# 存在性:
alert "I knew it!" if elvis?
# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)
上面的这一段CoffeeScript编译之后就会变成下面的代码
var cubes, list, math, num, number, opposite, race, square,
__slice = [].slice;
number = 42;
opposite = true;
if (opposite) {
number = -42;
}
square = function(x) {
return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
race = function() {
var runners, winner;
winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return print(winner, runners);
};
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
cubes = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = list.length; _i < _len; _i++) {
num = list[_i];
_results.push(math.cube(num));
}
return _results;
})();
CoffeeScript吸引人的特性除了这一点还有好多,比如CoffeeScript提供了类以及继承
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
class Horse extends Animal
move: ->
alert "Galloping..."
super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()
编译之后的代码如下
var Animal, Horse, Snake, sam, tom,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Animal = (function() {
function Animal(name) {
this.name = name;
}
Animal.prototype.move = function(meters) {
return alert(this.name + (" moved " + meters + "m."));
};
return Animal;
})();
Snake = (function(_super) {
__extends(Snake, _super);
function Snake() {
return Snake.__super__.constructor.apply(this, arguments);
}
Snake.prototype.move = function() {
alert("Slithering...");
return Snake.__super__.move.call(this, 5);
};
return Snake;
})(Animal);
Horse = (function(_super) {
__extends(Horse, _super);
function Horse() {
return Horse.__super__.constructor.apply(this, arguments);
}
Horse.prototype.move = function() {
alert("Galloping...");
return Horse.__super__.move.call(this, 45);
};
return Horse;
})(Animal);
sam = new Snake("Sammy the Python");
tom = new Horse("Tommy the Palomino");
sam.move();
tom.move();
CoffeeScript的函数绑定功能也是非常的方便
Account = (customer, cart) ->
@customer = customer
@cart = cart
$('.shopping_cart').bind 'click', (event) =>
@customer.purchase @cart
编译之后的代码是这样的
var Account;
Account = function(customer, cart) {
this.customer = customer;
this.cart = cart;
return $('.shopping_cart').bind('click', (function(_this) {
return function(event) {
return _this.customer.purchase(_this.cart);
};
})(this));
};
更多的资料可以参考 http://coffee-script.org/