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

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

像老板一樣指揮你的代碼

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

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

這行代碼將會(huì)被翻譯為如下的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的魔法時(shí)，你會(huì)愛上它的。

飛一般的方法綁定

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

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指向了一個(gè)jQuery的對(duì)象，該對(duì)象是在其他地方指定的——比如object.element = $('#some_div').

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

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

瞅一眼這個(gè)：

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

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

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

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

讓初始化來的更性感吧

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

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

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

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

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

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

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

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

coffee app.coffee

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

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

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

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

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

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

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

require('coffee-script/register');

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

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

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

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

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

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

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

coffee -c app.coffee

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

coffee -c src

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

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

coffee -c -o outputs src

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

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

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

coffee -o outputs -c src

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

coffee -o outputs -c -b src

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

coffee -o outputs -c -j out src

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

coffee -o outputs -c -w src

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

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

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

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

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

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

最新評(píng)論