昨天在编译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/
你才是真高产啊~我被你感动了
哪有啊,比起那些日更狂魔我还是差很多的。最初我的目标可是日更狂魔啦
我原来也是,哈哈,后来发现日更质量和精力都没法保证233