CoffeeScript简介 <二>

集合与迭代

.. 与 ...

先看例子：

arr = ["a1", "a2", "a3", "a4", "a5"]
arr[0..3] // ["a1", "a2", "a3", "a4"]
arr[-2..] // ["a4", "a5"]
arr[-3..3] // ["a3", "a4"]
arrRange = [1..5]//[1,2,3,4,5]

..包含右边区间。

arr = ["a1", "a2", "a3", "a4", "a5"]
arr[0...3] // ["a1", "a2", "a3"]
arr[-2...] // ["a4", "a5"]
arr[-3...3] // ["a3"]
arrRange = [1...5]//[1,2,3,4]

...不包含右边区间。

遍历

数组

arr = ["one", "two", "three", "four", "five"]

基本遍历：

console.log item for item in arr

加条件：

console.log item for item in arr when item isnt "two"

带索引：

console.log item for item,i in arr when i isnt 2

带循环项：

[1,5].map (i) -> console.log i*2 // 也可以用带索引的for循环

对象

obj = {a1: "a111", a2: "a222"}
console.log k,v for k,v of obj

循环

单行

console.log i for i in [0..5]

多行

for i in [0..5]
	console.log i

条件语句

基本语法

eat food if cat is hungry
play game unless cat is hungry
play game if cat isnt hungry

生成js代码为：

if (cat === hungry) {
  eat(food);
}

if (cat !== hungry) {
  play(game);
}

if (cat !== hungry) {
  play(game);
}

代码确实精简不少。

OO篇

使用coffeeScript实现面向对象写起来很爽。

类定义

class Animal
    constructor: (name) ->
		@name = name
    sayhello: () ->
		console.log @name
animal = new Animal('ray')
animal.sayhello()

生成的js代码为：

var Animal, animal;
Animal = (function() {
  function Animal(name) {}
  return Animal;
})();

this.name = name({
  sayhello: function() {}
});

console.log(this.name);
animal = new Animal('ray');
animal.sayhello();

继承

class Animal
  constructor: (name) ->
    @name = name
  sayhello: () ->
    console.log @name
class Cat extends Animal
  constructor:(name,@hungry) ->
    super

CoffeeScript 与 jQuery

$(function(){})
  |
  |
$ ->

比如：

$(function() {
	$('h1').click(function() {
		$(this).html('I am clicked');
	});
});
  |
  |
$ ->
	$('h1').click ->
		$(@).html 'I am clicked'

Require 与 Backbone

define [
  'backbone'
  'underscore'
  'text!templates/yes.html'
], (Bacbone, _, tpl) ->

  class UserView extends Backbone.View

    events: {}

    initialize: (options)->

    render: ->
      @$el.html _.template( tpl, {  } )

其他

对象判空

console?.log? 'log'

if (typeof console !== "undefined" && console !== null) {
	if (typeof console.log === "function") {
		console.log('log');
	}
}

关于 -> 和 => 号

cat = ->
  console.log this
cat = =>
  console.log @

# ->的结果
var cat;
cat = function() {
  return console.log(this);
};
# => 的结果
cat = (function(_this) {
  return function() {
    return console.log(_this);
  };
})(this);

也就是说：=>（胖头号）可以直接获取父级作用域中的this关键字。

最后