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

很早就知道這CoffeeScript一門語言，但是一直沒有機會系統的學習下，那天趁在公司沒有什么要緊的項目做，就根據CoffeeScript首頁的例子學了一下。

引用CoffeeScript的一段介紹:

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

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

自己是寫PHP的，最開始接觸CoffeeScript的時候，就被他吸引了，因為它竟然可以不用括號、分號就可以識別語法規則，在用jQuery編寫一些事件的時候經常會寫回調函數，常常在最后留下一大串的 });

使用CoffeeScript就可以寫出很優美的Js的代碼了,另外還可以很好的避免局部變量因為不加var而引用到全局變量。而造成一些莫名其妙的錯誤。

下面是自己的一些筆記:

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

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

當安裝成功了后可以使用

npm -v

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

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

安裝CoffeeScript

npm install -g coffee-script

確定安裝成功

coffee -v
CoffeeScript Version 1.7.1

?

coffee命令參數:

--nodejs

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

寫一個coffee文件:

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

編譯命令:

coffee -c hello.coffee

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

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

node hello.js

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

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

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

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

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

對應的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);

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

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

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

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 完成數組的循環，使用for/of 完成對象的循環

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

對應的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()

對應的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();

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

通過觀察編譯后的js發現，它是通過一個__extends方法來實現繼承這一用法的,其實也是通過更改prototype來實現。

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

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

說說注釋：

單行注釋：使用一個#，這種注釋方式不會被編譯進js當中

#這是單行注釋

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

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

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

?

在github中可以找到很多CoffeeScript寫的js項目，可以多看看!

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

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