像老板一樣指揮你的代碼

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

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í)說(shuō)最初這樣寫代碼確實(shí)讓人提心吊膽的，但是一旦你開始擁抱CoffeeScript的魔法時(shí)，你會(huì)愛(ài)上它的。

飛一般的方法綁定

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

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)綁定到原來(lái)的對(duì)象上，沒(méi)錯(cuò)，這很酷。
在2011年函數(shù)是這樣調(diào)用的
瞅一眼這個(gè)：

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

) 

使用CoffeeScript，多個(gè)參數(shù)可以寫成多行來(lái)調(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ù)的元括弧。

讓初始化來(lái)的更性感吧

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

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

}) 

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

$-> 
 some() 
 init() 

 calls() 

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

其實(shí)coffeescript這種語(yǔ)言因其可以一對(duì)一地翻譯為javascript的特性，使用起來(lái)其實(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ú)立的語(yǔ)言。 我們都知道，在node平臺(tái)上全局安裝完coffee-script包后，就可以通過(guò)coffee指令進(jìn)入coffeescript的交互界面， 叫它repl也行。如果你的項(xiàng)目完全是用coffee寫的，那就簡(jiǎn)單了，直接對(duì)你的入口腳本使用coffee指令就結(jié)了， 比如你的入口腳本名為“app.coffee”，那就執(zhí)行：

coffee app.coffee

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

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

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

另一個(gè)也許存在的缺點(diǎn)是性能方面的，畢竟node里面只有js引擎，coffee代碼需要先編譯為js再運(yùn)行， 這個(gè)過(guò)程是要消耗一點(diǎn)點(diǎn)時(shí)間的，盡管coffee到j(luò)s的編譯速度其實(shí)挺快的。不過(guò)這應(yīng)該不是什么大問(wèn)題， 一般來(lái)說(shuō)，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最常見(jiàn)的使用場(chǎng)景是web服務(wù)器，這就更沒(méi)問(wèn)題了。

在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文件。沒(méi)問(wèn)題，只需要注冊(cè)一下。假如你的項(xiàng)目入口文件是app.js， 那么只需要在這個(gè)文件最前面加上這么一句：

require('coffee-script/register');

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

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

缺點(diǎn)就是容易讓代碼有些亂，一會(huì)兒js，一會(huì)兒coffee，當(dāng)然第一種方式也可能會(huì)這樣， 不過(guò)都用coffee啟動(dòng)了里面應(yīng)該不會(huì)寫js了吧……總之一個(gè)項(xiàng)目還是把語(yǔ)言統(tǒng)一起來(lái)比較好。

性能問(wèn)題上跟第一種方式一樣，不多說(shuō)了。

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

一說(shuō)編譯，就感覺(jué)回到了正兒八經(jīng)的C或Java的時(shí)代。的確，作為一個(gè)編譯型語(yǔ)言，編譯后再運(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文件，放到和源文件相同的目錄中。
不過(guò)對(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ù)。 也就是說(shuō)所有的選項(xiàng)都放在coffee和文件名之間就可以了。 而-c這個(gè)選項(xiàng)是單獨(dú)的，沒(méi)有自己的參數(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)目來(lái)說(shuō)，最好提前確定好編譯方式，讓所有開發(fā)人員只需要一個(gè)指令就搞定所有編譯的事情，這就需要自動(dòng)化構(gòu)建了。

offee提供了一個(gè)自動(dòng)化構(gòu)建工具，cake，就像c世界的make。 不過(guò)就像官網(wǎng)上說(shuō)的那樣，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模塊編譯出來(lái)的字符串， 要么用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)的編譯方式也許是看起來(lái)最可靠的，應(yīng)該深受老程序員的喜愛(ài)。它可以讓團(tuán)隊(duì)形成固定的開發(fā)模式。 另外，編譯后的項(xiàng)目就成了純的js項(xiàng)目，無(wú)論是作為應(yīng)用直接運(yùn)行還是作為模塊被別的項(xiàng)目引用都不需要額外的依賴。 并且在運(yùn)行時(shí)不需要編譯，也就完全不存在編譯導(dǎo)致的性能問(wèn)題了。

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

CoffeeScript搭配Jquery的用法

Ajax請(qǐng)求

$ ?= require 'jquery' # For Node.js compatibility


$(document).ready ->
    # Basic Examples
 $.get '/', (data) ->
        $('body').append "Successfully got the page."


    $.post '/',
        userName: 'John Doe'
        favoriteFlavor: 'Mint'
        (data) -> $('body').append "Successfully posted to the page."


    # Advanced Settings
 $.ajax '/',
        type: 'GET'
        dataType: 'html'
        error: (jqXHR, textStatus, errorThrown) ->
            $('body').append "AJAX Error: #{textStatus}"
        success: (data, textStatus, jqXHR) ->
            $('body').append "Successful AJAX call: #{data}"

回調(diào)綁定

$ ->
  class Basket
    constructor: () ->
      @products = []


      $('.product').click (event) =>
        @add $(event.currentTarget).attr 'id'


    add: (product) ->
      @products.push product
      console.log @products


  new Basket()

鏈?zhǔn)秸{(diào)用

$("input")
  .val("")
  .css
    'z-index': 5
  .removeClass "fart"