大约是在两年前,我曾经接触过CoffeeScript(以下简称coffee),并且跟着书本简单地写过几行代码,但是当时我要是个刚开始接触前端开发的实习生,对于JavaScript几乎还是一窍不通的状态,就没有深入去学习Coffee。所以一直到今天,一个偶然的机会让我跟它再次相遇,于是我决定认真地对待它。
Coffee其实并不是任何一个JavaScript的库或者框架,而是一种JavaScript转译语言,在代码运行前,会被编译成高质量的JavaScript,所以实际上真正运行的程序依然是JavaScript,但它简化了编写JavaScript的过程并大大地缩短了JavaScript的代码量,使我们的前端开发人员不必再铺张繁琐地进行JavaScript脚本的编写,是一门伟大而优雅的转译语言。
闲话少絮,我们还是进入正题,开始学习CoffeeScript吧!
首先,在使用之前,我们必须知道使用Coffee所必须的环境,因为网上有很多安装的教程,我就不介绍了,这里贴几个链接供参考:
Windows环境下:http://freewind.me/blog/20111020/450.html
Linux 或者mac:http://blog.eddie.com.tw/2011/08/03/install-coffeescript/
如果在安装之前迫不及待地想体验一下Coffee,那么奉上链接:http://coffee-script.org/。
那么接下来,我们开始正式学习Coffee的语法。
变量的定义和作用域:
CoffeeScript 编译器会考虑所有变量, 保证每个变量都在词法域里适当地被定义 — 你永远不需要自己去写var,coffee会自动在变量第一次出现的地方的作用域内为其加上var,当你需要定义一个全局变量时,只需定义为window即可。
CoffeeScript:
#定义变量
outer = 1
#全局变量
window.v=1
#定义数组,可以试用换行符来省略逗号。
array=[1,2,3
4,5,6
7,8,9
]
#定义对象, 对象可以用缩进替代花括号来声明.
kids =
brother:
name: "Max"
age: 11
sister:
name: "Ida"
age: 9
#定义函数,试用符号“->”
changeNumbers = ->
#此处定义的inner的作用域会默认为在函数changeNumbers里面,不会干扰全局的inner
inner = -1
outer = 10
inner = changeNumbers()
JavaScript:
var array, changeNumbers, inner, kids, outer;
outer = 1;
window.v=1
array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
kids = {
brother: {
name: "Max",
age: 11
},
sister: {
name: "Ida",
age: 9
}
};
changeNumbers = function() {
var inner;
inner = -1;
return outer = 10;
};
函数:
定义函数名与变量名一样,将函数名写在最前面,之后是一个等号,然后是是个可选的圆括号包裹着参数(如果没有参数就可以省略了),接下来是一个箭头“->”,最后是函数体。
CoffeScript:
square = (x) -> x * x
cube = (x) -> square(x) * x
triangle = (x,h) -> x * h /2
JavaScript:
var cube, square,triangle;
square = function(x) {
return x * x;
};
cube = function(x) {
return square(x) * x;
};
triangle = function(x.h){
return x * h / 2;
};
使用条件语句(if else unless):
在coffee中不需要使用圆括号和花括号,可以使用缩进来代替,或者在使用条件语句时,可以在语句的后面加上if 或者unless来作为后缀。另外,在coffee中可以使用 and 来代替&&,使用or来代替 || ,这让coffee代码看起来就像是在说话。
CoffeeScript:
#使用缩进
if a and b
a=b
else
a=1
b=1
#使用后缀
a=b if a and b
#使用后缀,这个看起来像不像在说话?
a=if a b then b else 1
var a, b;
if (a && b) {
a = b;
} else {
a = 1;
b = 1;
}
if (a && b) {
a = b;
}
a = a(b) ? b : 1;
好哒,第一节的内容到此为止,欲知后事如何,请听下回分解~