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

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

引用CoffeeScript的一段介紹:

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

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

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

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

下面是自己的一些筆記:

因?yàn)镃offeeScript是基于nodejs的,所以首先需要安裝nodejs?(這家伙也不錯(cuò)，居然可以讓js運(yùn)行在服務(wù)端)，在nodejs下載相應(yīng)平臺(tái)的版本就可以了，我這里使用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

測(cè)試是否安裝成功~ ? 如果沒(méi)有該命令看看是不是PATH沒(méi)有加入。

使用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文件放到指定的文件夾中。

寫一個(gè)coffee文件:

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

編譯命令:

coffee -c hello.coffee

會(huì)在同級(jí)目錄下生成一個(gè)同名的js文件。

可以直接使用node命令執(zhí)行js文件 或者在html中引入讓瀏覽器來(lái)執(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包裹在了一個(gè)匿名函數(shù)當(dāng)中，并用call(this)調(diào)用，這樣使得js代碼隔離，不會(huì)和外部混淆。

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

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

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

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

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

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

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

coffeeScript跟js中判斷的對(duì)比

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

solipsism = true if mind? and not world?

speed = 0
speed ?= 15

footprints = yeti ? "bear"

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

for/in示例：

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

對(duì)于的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

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

對(duì)應(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)中并沒(méi)有class，extends 這樣的用法，只不過(guò)為了讓使用起來(lái)方便，CoffeeScript允許你這樣簡(jiǎn)單的使用。

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

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

CoffeeScript為了方便使用prototype，可以使用雙冒號(hào)來(lái)替代prototype。

說(shuō)說(shuō)注釋：

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

#這是單行注釋

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

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

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

?

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

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

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