Coffeescript作為Javascript低調(diào)的小弟實(shí)在是有過人之處，使用它可以增進(jìn)開發(fā)效率，減少代碼錯誤， 關(guān)鍵是能大幅提升開發(fā)愉悅感。我越來越覺得只要可能就在自己的項(xiàng)目中把coffee用起來。

然而也許你和我一樣，在了解完coffeescript的語法后準(zhǔn)備一試身手的時候，卻面對如何把它引入項(xiàng)目而犯起愁來。

像老板一樣指揮你的代碼

CoffeeScript提供了一堆酷斃了的數(shù)組迭代方法。最好的事莫過于這不僅僅能工作于數(shù)組，還能工作于jQuery對象了。來行詩一般的代碼吧：

formValues = (elem.value for elem in $('.input')) 

這行代碼將會被翻譯為如下的Javascript：

var elem, formValues; 
formValues = (function() { 
 var _i, _len, _ref, _results; 
 _ref = $('.input'); 
 _results = []; 
 for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
  elem = _ref[_i]; 
  _results.push(elem.value); 
 } 
 return _results; 
})(); 

老實(shí)說最初這樣寫代碼確實(shí)讓人提心吊膽的，但是一旦你開始擁抱CoffeeScript的魔法時，你會愛上它的。

飛一般的方法綁定

在jQuery的回調(diào)中使用"=>"將會大大減省你手動綁定方法到對象的麻煩。還是來看段代碼吧：

object = 
 func: -> $('#div').click => @element.css color: 'red' 

下面是編譯輸出的Javascript：

var object; 
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 
object = { 
 func: function() { 
  return $('#div').click(__bind(function() { 
   return this.element.css({ 
    color: 'red' 
   }); 
  }, this)); 
 } 
}; 

代碼中的@element指向了一個jQuery的對象，該對象是在其他地方指定的——比如object.element = $('#some_div').

任何使用"=>"所指定的回調(diào)函數(shù)都會自動綁定到原來的對象上，沒錯，這很酷。

在2011年函數(shù)是這樣調(diào)用的

瞅一眼這個：

$.post( 
 "/posts/update_title" 
 new_title: input.val() 
 id: something 
 -> alert('done') 
 'json' 
) 

使用CoffeeScript，多個參數(shù)可以寫成多行來調(diào)用，逗號和大括弧是可選的，這使得一些jQuery中簽名比較長的方法比如$.post() 和 $.animate() 等更加易讀。這兒還有一個例子：

$('#thing').animate 
 width: '+20px' 
 opacity: '0.5' 
 2000 
 'easeOutQuad' 

很美味的Coffee不是嗎?要注意第一個參數(shù)是一個匿名的對象，你甚至可以省略調(diào)用函數(shù)的元括弧。

讓初始化來的更性感吧

我最初開始使用jQuery時我是這樣做頁面初始化的：

$(document).ready(function() { 
 some(); 
 init(); 
 calls(); 
}) 

CoffeeScript和新版的jQuery使得上面的代碼進(jìn)化的如此性感：

$-> 
 some() 
 init() 
 calls() 

函數(shù)定義語法在CoffeeScript里本身已經(jīng)非常酷了，能在上面這些場合使用使得其更酷了。你會發(fā)現(xiàn)所有需要回調(diào)的函數(shù)調(diào)用在CoffeeScript中都是如此簡單。

其實(shí)coffeescript這種語言因其可以一對一地翻譯為javascript的特性，使用起來其實(shí)非常靈活。 將其引入項(xiàng)目的方式也不止一個。這里，我先就node項(xiàng)目引入coffeescript的方式作一個匯總，并對比一下各個方式的優(yōu)劣性。

直接使用coffee指令運(yùn)行純coffeescript項(xiàng)目

一般提起coffeescript，自然而然地會想到他是javascript的小弟，總脫離不了js的陰影。其實(shí)你完全可以把它認(rèn)作是獨(dú)立的語言。 我們都知道，在node平臺上全局安裝完coffee-script包后，就可以通過coffee指令進(jìn)入coffeescript的交互界面， 叫它repl也行。如果你的項(xiàng)目完全是用coffee寫的，那就簡單了，直接對你的入口腳本使用coffee指令就結(jié)了， 比如你的入口腳本名為“app.coffee”，那就執(zhí)行：

coffee app.coffee

注意，這里的擴(kuò)展名coffee是不能省略的。

這個方式應(yīng)該說是使用coffeescript最“官方”的方式。簡單，直接！而且，一旦你以一個coffee文件作為項(xiàng)目的入口， 那整個項(xiàng)目就同時兼容coffee和js了。你在項(xiàng)目里可以任意require js或coffee文件及模塊， 甚至可以在項(xiàng)目中的js文件中隨便require coffee文件。并且在你引用無論是coffee還是js文件的時候都無需擴(kuò)展名， 只要前面部分名稱不沖突就行。

這個方式有個最大的問題就是，如果它作為一個模塊，只能被用于coffee項(xiàng)目；如果他作為一個應(yīng)用， 運(yùn)行環(huán)境必須安裝coffee-script。畢竟coffeescript現(xiàn)在還是一個小眾語言，它作為模塊時喪失了js用戶實(shí)在可惜。

另一個也許存在的缺點(diǎn)是性能方面的，畢竟node里面只有js引擎，coffee代碼需要先編譯為js再運(yùn)行， 這個過程是要消耗一點(diǎn)點(diǎn)時間的，盡管coffee到j(luò)s的編譯速度其實(shí)挺快的。不過這應(yīng)該不是什么大問題， 一般來說，require都是寫在文件的頂部，也就是應(yīng)用在啟動的時候就一氣兒把該require的文件都require了， require的時候coffee就被編譯成了js放到了js引擎中，那么編譯消耗的那點(diǎn)時間都集中在了應(yīng)用啟動時， 運(yùn)行時幾乎不會遇到require新的coffee的情況了。node最常見的使用場景是web服務(wù)器，這就更沒問題了。

在javascript項(xiàng)目中引用coffeescript

npm中的coffee-script既可以全局安裝，也可以作為項(xiàng)目的一個模塊安裝。那coffee-script作為項(xiàng)目的一個模塊有啥意義呢？ 其實(shí)是給項(xiàng)目添加了一個coffeescript的編譯器，這個項(xiàng)目就可以在運(yùn)行時隨時編譯coffee文件。

你一定希望像第一種方式里那樣隨便引用coffee文件。沒問題，只需要注冊一下。假如你的項(xiàng)目入口文件是app.js， 那么只需要在這個文件最前面加上這么一句：

require('coffee-script/register');

然后你就可以在項(xiàng)目中隨便require coffee文件了。

這個方式本質(zhì)上和第一種方式?jīng)]啥區(qū)別，只不過coffee-script沒安裝在全局，因此你的模塊可以獨(dú)立存在， 作為應(yīng)用也不需要環(huán)境安裝好coffee-script了。

缺點(diǎn)嘛，我覺得最大的問題就是容易讓代碼有些亂，一會兒js，一會兒coffee，當(dāng)然第一種方式也可能會這樣， 不過都用coffee啟動了里面應(yīng)該不會寫js了吧……總之我覺得一個項(xiàng)目還是把語言統(tǒng)一起來比較好 （遺憾的是我主要用這種方式，在一個已經(jīng)用js寫出了大體結(jié)構(gòu)的項(xiàng)目里，我就想用coffee腫么辦……）

性能問題上跟第一種方式一樣，不多說了。

正統(tǒng)的方式——編譯

一說編譯，就感覺回到了正兒八經(jīng)的C或Java的時代。的確，作為一個編譯型語言，編譯后再運(yùn)行才是正道。 c有g(shù)cc，java有javac，cofee有coffee -c。

要編譯一個cofee文件很簡單，比如要編輯app.coffee這個文件，就在文件的當(dāng)前目錄執(zhí)行：

coffee -c app.coffee

一個名為app.js的文件就出現(xiàn)在當(dāng)前目錄下了。這個指令也可以應(yīng)用于目錄， 比如你把項(xiàng)目中所有的coffee源文件放到了src目錄下，那就執(zhí)行：

coffee -c src

src目錄及其各級子目錄下的所有coffee源文件都會編譯成js文件，放到和源文件相同的目錄中。

不過對于大型項(xiàng)目，把源文件和編譯結(jié)果文件放到一起可不太好。指定一個輸出目錄就行了：

coffee -c -o outputs src

這個指令的參數(shù)順序有點(diǎn)奇怪。在coffee的幫助里是這么定義的：

coffee [options] path/to/script.coffee -- [args]

注意，所有的選項(xiàng)（options）都在coffee和文件路徑之間。而最后的args是把目標(biāo)文件作為腳本執(zhí)行時給傳遞的參數(shù)。 也就是說所有的選項(xiàng)都放在coffee和文件名之間就可以了。 而-c這個選項(xiàng)是單獨(dú)的，沒有自己的參數(shù)，它只表示要把指令最后面提供的那個文件給編譯了，所以寫成這樣也行：

coffee -o outputs -c src

假如想再加個選項(xiàng)，讓編譯結(jié)果不被自執(zhí)行函數(shù)體包圍，就是：

coffee -o outputs -c -b src

再假如想把所有源文件編譯成一個名為out.js的目標(biāo)文件，就是：

coffee -o outputs -c -j out src

如果每次改點(diǎn)代碼都要這么執(zhí)行指令也挺煩人的。coffee指令有一個選項(xiàng)-w可以監(jiān)視源文件的變動而自動編譯：

coffee -o outputs -c -w src

對于大型項(xiàng)目來說，最好提前確定好編譯方式，讓所有開發(fā)人員只需要一個指令就搞定所有編譯的事情，這就需要自動化構(gòu)建了。

offee提供了一個自動化構(gòu)建工具，cake，就像c世界的make。 不過就像官網(wǎng)上說的那樣，cake是一個很簡單的構(gòu)建系統(tǒng)。實(shí)際上cake的功能就是執(zhí)行一個名為cakefile的腳本， 而cakefile腳本是用coffeescript寫的。這個腳本只提供非常有限的內(nèi)建函數(shù)，比如task， 用于聲明一個指令及其對應(yīng)的描述和執(zhí)行函數(shù)。其它的就是在寫一個純粹的node項(xiàng)目， 想完成編譯要么使用node的fs模塊輸出coffee模塊編譯出來的字符串， 要么用child_process模塊執(zhí)行shell指令。其實(shí)cake構(gòu)建的目標(biāo)不一定必須是coffee，由于它實(shí)際是執(zhí)行一個node腳本， 處理任何自動化的事情都可以。

另外還有一些更優(yōu)秀的第三方自動化構(gòu)建工具也可以完成coffee的自動編譯，比如著名的Grunt，以及國內(nèi)的fekit等。

這種正統(tǒng)的編譯方式也許是看起來最可靠的，應(yīng)該深受老程序員的喜愛。它可以讓團(tuán)隊(duì)形成固定的開發(fā)模式。 另外，編譯后的項(xiàng)目就成了純的js項(xiàng)目，無論是作為應(yīng)用直接運(yùn)行還是作為模塊被別的項(xiàng)目引用都不需要額外的依賴。 并且在運(yùn)行時不需要編譯，也就完全不存在編譯導(dǎo)致的性能問題了。

缺點(diǎn)嘛，就是太麻煩。如果你是要做一個不太大的項(xiàng)目，光搞cakefile或者配置grunt就要費(fèi)半天時間，不太值得。

通過jQuery，node.js，javascript中使用coffeescript的介紹，小伙伴們是否對coffeescript有了新的認(rèn)識了呢

最新評論