Coffeescript极简教程

Posted on 2014-12-20   |   In coffeescript   |   
配合没耐心的nodejs教程，写给希望快速上手的coffeescript使用者。

一、一些简写和约定：

coffeescript和python类似，空格，缩写都是有意义的。
换行替换分号，缩进替换花括号，空格替换括号，
但是数组的’[]’不能省略。

二、全局变量：

CoffeeScript剔除了全局变量，避免js中全局变量的误用。（CoffeeScript使用一个匿名函数把所有脚本都包裹起来，将其限定在局部作用域中，并且在为所有的变量赋值前自动添加var）

当然也有需要用全局变量的时候，直接给全局对象windoow赋值即可：

1
2
exports = this
exports.tempVal = “tempVal”

这里在顶级作用域中使用，this相当于全局变量

三、函数

3.1 函数的标准写法

-> 替代了function(){}
如

1
2
3
4
sum = (nums...) -> 
	result = 0
	nums.forEach(n) -> result += n
	result

（nums）为传入的参数槽（splats），…表示不定参数，同时自动返回result
调用输出结果 alert sum() 或者 alert sum a,b,c ,其中空格表示括号，但是易混淆或者无参调用的时候，请带上括号。

多重赋值：

btw，因为讲到…不定参数，就提下多重赋值与…的结合：
多重赋值就是将一个数组的值逐个赋给后面的一系列变量。
如

1
2
3
4
5
myArray = ["A", "B", "C", "D”] 
[start, middle..., end] = myArray 
console.log "start is #{start}” 
console.log "middle is #{middle}” 
console.log "end is #{end}”

输出：

1
2
3
start is A 
middle is B,C 
end is D

顺便提下，数组是支持range的用法的，[1…10]

3.2函数上下文：

js的上下文变化会很频繁，尤其在回调函数内，coffeescript提供=>或者self(this)的方式，以下为=>的例子：

1
2
3
this.clickHandler = -> alert “clicked”
element.addEventListener “click”, (e) =>
	his.clickHandler(e)

四、集合遍历

4.1 for循环：

1
2
3
myLetters = [“a”,”b”,”c”,”d”]
for letter in myLetters
console.log letter.toUpperCase()

for中增加when条件

1
2
for num，i in a when num < 5
console.log “第#{i}个数为#{num}"

4.2 列表推导式(Comprehension)

类似ruby的前缀表达式

1
2
3
myLetters = [“a”,”b”,”c”,”d”]
console.log letter.toUpperCase() for letter in myLetters

4.3 对象枚举的方式

(这里in换成了of）

1
2
3
4
5
6
person = 
firstName: “Mark”
lastName: “Bates”
for key, value of person
console.log “#{key} is #{value}”

对象属性的枚举还支持when关键字；如果需要过滤继承属性，还可以使用own关键字

1
2
3
4
5
6
7
myObject = 
name: “Mark”
Object.prototype.dob = new Date(1976, 7, 24)
for own key, value of myObject
console.log “#{key}:#{value}”

4.4 while用法

与js不同，while还可以返回结果数组

1
2
3
num = 6
minstrel = while num -= 1
	num + “ Brave Sir Robin ran away”

综合例子：

1
2
3
@updateAvatars = ->
name = $(‘.avatar[data-name]’),map -> $(this).data(’name’)
Utils.findAvatar(name) for name in $.unique(names)

五、别名与存在操作符

5.1 别名：

@ 表示this的别名，如@saviour = this.saviour
:: 表示prototype

5.2 存在操作符？：

coffeescript中，？只会在变量不存在或者undefined的时候返回假，
如

1
praise if brain?

还可以用来替换||操作符：

1
velocity = southern ？ 40

或者在访问对象时进行null检查，

1
blacknight.getLegs()?.kick()

判断属性是否存在外，你还也可以把？放到kick右边，判断函数是否存在，是否可以调用等

六、类

Coffeescript中类定义是组合模式（组合使用构造模式和原型模式），继承方式则用寄生组合模式。

6.1 定义类

1
2
3
4
5
6
7
8
9
10
class Employee
constructor: (name) ->
@name = name
dob: (year = 1976, month =7, day = 24) ->
new Date(year, month, day)
emp1 = new Employee(“Mark”)
console.log emp1.name
console.og emp11.dob()

6.2 添加方法

方法是直接定义在原型上，显示为原型添加方法，很简单：

1
Array::size = -> @length

6.3 构造函数简化

如果把参数赋值给同名属性，可以用@语法糖，将构造函数简化为：

1
constructor: (@name) ->

6.4 实例变量的使用

1
2
3
4
5
6
7
8
class Animal
	price: 5
	sell: =>
		alert “Give me #{@price} shillings!”
animal = new Animal
$(“#sell”).click(animal.sell)

其中注意到=>的使用，表示引用方法调用的上下文，输出5.

6.5 静态变量的使用

1
2
3
4
class Animal
	@find: (name) ->
Animal.find(“Parrot”)

其实就是在类属性上（this）设置变量值。

6.6 继承

1
2
3
4
5
6
7
8
class Animal
	constructor: (@name) ->
class Parrot extends Animal
Animal::rip = true
parrot = new Parrot(“Macaw”)
alert(“This parrot is no more”) if parrot.rip

这里要注意的是，静态变量是直接拷贝给子类的，而不是像实例属性那样使用原型来继承。

七、Mixins混入

举个例子：
module类有两个静态方法，@extend()和@include()，分别来实现对类的静态属性和实例属性的扩展。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
moduleKeywords = [‘exteded’, ‘included’]
class Module
	@extend: (obj) ->
		for key, value of obj when key not in moduleKeywords
			@[key] = value
			obj.extended?.apply(@)
			this
	@include: (obj) ->
		for key, value of obj when key not in moduleKeywords
			# Assign properties to the prototype
			@::[key] = value
		obj.included?.apply(@)
		this

然后是如何使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
classProperties = 
	find: (id) ->
	create: (attrs) ->
instanceProperties = 
	save: ->
class User extends Module
	@extends classProperties
	@include instanceProperties
	
# Usage:
user = User.find((1)
user = new User
user.save()

以上，我们为User类添加了静态属性find()和create()，还添加了实例属性save()。

再给一个例子，在扩展类后执行回调：

1
2
3
4
5
6
7
8
9
ORM = 
	find: (id) ->
	create: (attrs) ->
	extended: ->
		@include
			save: ->
class User extends Module
	@extends ORM

基础讲完，接下来就可以围绕网络，文件，进程，异步等进行专项练习了，好运！

参考：
《The Little Book on CoffeeScript》：http://book.douban.com/subject/10462179/
Learn X in Y minutes Where X=coffeescript：http://learnxinyminutes.com/docs/coffeescript/
CoffeeScript极简教程：http://chunfenglee.com/blog/2013/10/13/beginning-coffeescript/

（转载本站文章请注明作者和出处 Vernon Zheng(郑雪峰) – vernonzheng.com ，请勿用于任何商业用途）

#coffeescript #基础
整合Sentry和NodeJS实现分布式日志收集
没耐心的NodeJS基础教程