前段时间公司的一个项目是用CoffeeScript和backbone写的,于是去学了一下CoffeeScript,在此给大家分享一下
我们知道JavaScript是硬绑了C/Java语法,但CoffeeScript却不是,而是改为采用了类似Ruby/Python的语法,所以可以说,采用了这种语法之后,CoffeeScript更加适合函数式+动态语言内核的
有人说CoffeeScript算是JavaScript的补丁版本,我认为这也是没错的,因为在采用了类似Ruby的语法之后,我们能够更加优美地编写JS代码。何谓优美,我认为就是能够以最少代码量去实现传统JavaScript的操作并且是可使用又易懂的(下面会在实例中给大家展示),不仅如此,CoffeeScript还增加了许多语法糖比如class,extends等等(当然在ES6也增加了,只是CoffeeScript是在ES6之前出现的),这个大家可自行查阅。
总的来说,CoffeeScript让JavaScript编写起来更加地方便快捷,有一句话是这么形容CoffeeScript的:CoffeeScript是编写起来能够快得飞起的JavaScript。
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() {//Splats
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;
})();
以上就是在JavaScript中我们会经常用到的代码,那么在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来定义的,可直接赋值。条件语句可不写小括号和大括号。函数使用'->’代表return(这个和ES6中的箭头函数有点像,但还是区别的,比如ES6的箭头函数是静态上下文,this指针不变,CoffeeScript则不是,保留了JavaScript原本的特点)。对象,数组推导等等和原本的JavaScript来比是不是更加地简洁,而且在编写的时候只要遵守CoffeeScript的规范,你会发现你写JS的速度大大提升。
当然这个实例只是CoffeeScript的一小部分,有兴趣的话可以看看文档http://coffee-script.org/
学习的路还在继续,共勉!