摘要：而造成一些莫名其妙的錯誤。寫一個文件打印出編譯命令會在同級目錄下生成一個同名的文件。將包裹在了一個匿名函數(shù)當(dāng)中，并用調(diào)用，這樣使得代碼隔離，不會和外部混淆。其中的表示的就是為了方便使用，可以使用雙冒號來替代。

很早就知道這CoffeeScript一門語言，但是一直沒有機(jī)會系統(tǒng)的學(xué)習(xí)下，那天趁在公司沒有什么要緊的項(xiàng)目做，就根據(jù)CoffeeScript首頁的例子學(xué)了一下。

引用CoffeeScript的一段介紹:

CoffeeScript 是一門編譯到 JavaScript 的小巧語言.?在 Java 般笨拙的外表下, JavaScript 其實(shí)有著一顆華麗的心臟. CoffeeScript 嘗試用簡潔的方式展示 JavaScript 優(yōu)秀的部分.

CoffeeScript 的指導(dǎo)原則是:?"她僅僅是 JavaScript". 代碼一一對應(yīng)地編譯到 JS, 不會在編譯過程中進(jìn)行解釋. 已有的 JavaScript 類庫可以無縫地和 CoffeeScript 搭配使用, 反之亦然. 編譯后的代碼是可讀的, 且經(jīng)過美化, 能在所有 JavaScript 環(huán)境中運(yùn)行, 并且應(yīng)該和對應(yīng)手寫的 JavaScript 一樣快或者更快.
---- 來自CoffeeScript中文

自己是寫PHP的，最開始接觸CoffeeScript的時候，就被他吸引了，因?yàn)樗谷豢梢圆挥美ㄌ枴⒎痔柧涂梢宰R別語法規(guī)則，在用jQuery編寫一些事件的時候經(jīng)常會寫回調(diào)函數(shù)，常常在最后留下一大串的 });

使用CoffeeScript就可以寫出很優(yōu)美的Js的代碼了,另外還可以很好的避免局部變量因?yàn)椴患觱ar而引用到全局變量。而造成一些莫名其妙的錯誤。

下面是自己的一些筆記:

因?yàn)镃offeeScript是基于nodejs的,所以首先需要安裝nodejs?(這家伙也不錯，居然可以讓js運(yùn)行在服務(wù)端)，在nodejs下載相應(yīng)平臺的版本就可以了，我這里使用CentOS系統(tǒng)。

wget -c http://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz
tar -zxvf node-v0.10.26.tar.gz -C /usr/local/src/
cd /usr/local/src/
./configure
make && make install

當(dāng)安裝成功了后可以使用

npm -v

測試是否安裝成功~ ? 如果沒有該命令看看是不是PATH沒有加入。

使用npm包管理工具安裝CoffeeScript(為了加快安裝速度，可以使用淘寶NPM鏡像)

安裝CoffeeScript

npm install -g coffee-script

確定安裝成功

coffee -v
CoffeeScript Version 1.7.1

?

coffee命令參數(shù):

--nodejs

我習(xí)慣 這么用：coffee -c -w -o ./js hello.coffee 這樣就可以就可以一般編寫一邊編譯，并把編譯后的js文件放到指定的文件夾中。

寫一個coffee文件:

#打印出Hello World
Console.log "Hello World"

編譯命令:

coffee -c hello.coffee

會在同級目錄下生成一個同名的js文件。

可以直接使用node命令執(zhí)行js文件 或者在html中引入讓瀏覽器來執(zhí)行 ,這里用node直接執(zhí)行:

node hello.js

Hello World!完成 我們看看coff幫我們編譯成了什么樣子的js。

// Generated by CoffeeScript 1.7.1
(function() {
console.log("Hello World!");
}).call(this);

CoffeeScript 將js包裹在了一個匿名函數(shù)當(dāng)中，并用call(this)調(diào)用，這樣使得js代碼隔離，不會和外部混淆。

在js中定義變量需要加上var，但是在CoffeeScript中你不需要這樣做，直接

age=22
name="silenceper"
say=(arg)->
 console.log "my name is "+arg
say name

對應(yīng)的js如下:

// Generated by CoffeeScript 1.7.1
(function() {
 var age, name, say;

 age = 22;

 name = "silenceper";

 say = function(arg) {
 var str;
 str = "my name is " + arg;
 return console.log(str);
 };

 say(name);

}).call(this);

可以看到所有的全局變量都會被定義在最頂層,函數(shù)內(nèi)部的局部變量也被加上var定義，防止和局部變量混淆。這一點(diǎn)非常有用，之前就遇到過這樣的問題，因?yàn)槎x了一個變量，剛好這個變量就是dom的id，而我又沒有加上var聲明，導(dǎo)致ie認(rèn)為這是一個dom對象，而出現(xiàn)一些莫名奇妙的錯誤，當(dāng)然還有很多，相信寫js的人也遇到過這樣的問題。

我已經(jīng)在上面使用了函數(shù)，它是通過->的形式來定義一個函數(shù)，有參數(shù)的話就在前面的括號中寫參數(shù)，然后通過空格 縮進(jìn)來表示函數(shù)體。

其實(shí)跟js差不多 ?只不過使用起來更加方便了，它不需要你加括號、分號來區(qū)分，這里也是使用空格、縮進(jìn)來處理。

day="Thursday"
if day is "Saturday" or "Sunday"
    go "rest"
else
    go "work"

coffeeScript跟js中判斷的對比

還有存在性判斷：就是在變量的后邊加上一個?

solipsism = true if mind? and not world?

speed = 0
speed ?= 15

footprints = yeti ? "bear"

使用for/in 完成數(shù)組的循環(huán)，使用for/of 完成對象的循環(huán)

for/in示例：

eat food for food in ["toast", "cheese", "wine"]

對于的js

var _ref,food,_i;
_ref = ["toast", "cheese", "wine"];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  food = _ref[_i];
  eat(food);
}

for/of 示例：

yearsOld = max: 10, ida: 9, tim: 11

ages = for child, age of yearsOld
  "#{child} is #{age}"

注意：其中的#{}就是變量的替換

使用官方的示例：

?

switch day
  when "Mon" then go work
  when "Tue" then go relax
  when "Thu" then go iceFishing
  when "Fri", "Sat"
    if day is bingoDay
      go bingo
      go dancing
  when "Sun" then go church
  else go work

對應(yīng)的js:

switch (day) {
  case "Mon":
    go(work);
    break;
  case "Tue":
    go(relax);
    break;
  case "Thu":
    go(iceFishing);
    break;
  case "Fri":
  case "Sat":
    if (day === bingoDay) {
      go(bingo);
      go(dancing);
    }
    break;
  case "Sun":
    go(church);
    break;
  default:
    go(work);
}

直接參考官方的示例：

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()

對應(yīng)的js:

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();

其實(shí)在javascript當(dāng)中并沒有class，extends 這樣的用法，只不過為了讓使用起來方便，CoffeeScript允許你這樣簡單的使用。

通過觀察編譯后的js發(fā)現(xiàn)，它是通過一個__extends方法來實(shí)現(xiàn)繼承這一用法的,其實(shí)也是通過更改prototype來實(shí)現(xiàn)。

其中的@name 表示的就是this.name

CoffeeScript為了方便使用prototype，可以使用雙冒號來替代prototype。

說說注釋：

單行注釋：使用一個#，這種注釋方式不會被編譯進(jìn)js當(dāng)中

#這是單行注釋

多行注釋：使用三個#開始，三個#結(jié)束。這種注釋方式會被編譯為/**/的形式

###
這是多行注釋
###

其實(shí)CoffeeScript當(dāng)中還有很多奇妙便捷的功能，你可以在CoffeeScript首頁的例子中找到。

?

在github中可以找到很多CoffeeScript寫的js項(xiàng)目，可以多看看!

另外還有一個js轉(zhuǎn)CoffeeScript的工具：https://github.com/js2coffee/js2coffee

原文地址:http://silenceper.com/archives/1108.html