來點CoffeeScript嗎？

簡單易懂的介紹

CoffeeScript是什麼？

首先，它是一門小巧的編程語言。有一本關於CoffeeScript的指南，寫做「The Little Book on CoffeeScript」：

很小，是嗎？

而後，它是一門JavaScript的轉譯語言。這個轉譯過程看起來像這樣：

.coffee的文件將會被編譯爲.js的文件，而後，就像使用JavaScript那樣使用它！

在[coffeescript.org][]上有這樣一句話：

The golden rule of CoffeeScript is: "It's just JavaScript".

也就是說，良好的面對CoffeeScript的心態是，「它只是JavaScript」！

更少代碼

CoffeeScript可讓你少寫一點代碼。請看下圖：

可見，CoffeeScript精簡了JavaScript的{}、()、;等符號的使用，併爲function、this等關鍵字定義了簡單的符號表示法。這些風格轉換都使得CoffeeScript代碼量更少。

通常來講，CoffeeScript能夠縮短大約1 / 3的代碼長度。

語言特性加強

CoffeeScript較JavaScript在語言特性上進行了改善。在CoffeeScript中，全部的變量聲明都再也不使用var關鍵字：

number = 1.0

CoffeeScript在編譯時會自動分析上面這樣的語句，若是被賦值的變量未被定義，會在做用域頂部用var定義變量（由.coffee編譯獲得的.js）。這就避免了意外建立全局變量。若是要在CoffeeScript中聲明全局變量，必須用顯式的代碼定義：

window.paintSize = 10

CoffeeScript爲字符串拼接提供了更方便的寫法，例如：

drawTitle = "Start from #{number}."

其中number會取做用域中的對應變量。

CoffeeScript使用is表示===，不推薦的==和!=將不能使用。例如：

"draw" if 1 is true

其餘的語義化的轉化：

CoffeeScript默認將最後一條語句做爲返回值（受啓發於Ruby），例如：

description = ->
    console.log "Thinking."
    @

將等同於：

description = function() {
    console.log("Thinking.");
    return this;
};

可能有用的一些說明

隱式括號

在CoffeeScript中，容許用空格的形式來表示括號，這稱爲隱式括號。可是，隱式括號使用不當會帶來一些問題，例如：

console.log Math.floor 1.7, Math.ceil 1.7

編譯爲.js將是：

console.log(Math.floor(1.7, Math.ceil(1.7)));

這可能不是你想要的結果。關於隱式括號須要理解的一點是：直到表達式末尾，隱式括號纔會閉合。因此，建議的寫法是，單條語句只在第一處位置使用隱式括號，其餘位置都顯式地把括號寫出來。例如：

console.log Math.floor(1.7), Math.ceil(1.7)

將正確編譯爲：

console.log(Math.floor(1.7), Math.ceil(1.7));

此外，不帶參數的函數調用，將不能省略括號。例如你想要init();語句，那麼在CoffeeScript中你也須要寫做init()。

語句都是表達式

在CoffeeScript中，全部的語句都視爲表達式。請看這樣的語句：

name = if 1 is true 
    "green tea" 
else 
    "black tea"

這在CoffeeScript中是合法的，將被編譯爲：

name = 1 === true ? "green tea" : "black tea";

所以能夠正常運行。相似的，其餘種類的語句也能夠這樣使用，CoffeeScript都會很好地處理它們。

從CoffeeScript中學習JavaScript

CoffeeScript所作的不少語言特性加強，都來源於JavaScript的最佳實踐。看一看編譯後的JavaScript，就能夠了解到CoffeeScript是如何實現的，這可能對學習JavaScript也有所幫助。例如，CoffeeScript可以使用?在賦值以前檢查變量是否存在：

draw?.tool = "pencil"

編譯後的代碼：

if (typeof draw !== "undefined" && draw !== null) {
    draw.tool = "pencil";
}

這裏CoffeeScript展現了JavaScript的「空比較」的最正確的方法。

再例如，CoffeeScript可以使用=>來定義綁定上下文（this）的函數：

rest = (drink) =>
    @status = "Have a #{drink}!"

對應.js是：

rest = (function(_this) {
    return function(drink) {
        return _this.status = "Have a " + drink + "!";
    };
})(this);

能夠看到CoffeeScript用了一個特定結構實現了函數綁定，這個寫法也一樣是有用的參考。

CoffeeScript調試的問題

你可能也想到了，若是須要調試，瀏覽器的錯誤提示是針對編譯後的JavaScript而不是原CoffeeScript，所以調試分析會比較麻煩。這是事實，但我認爲影響不大，有如下幾點緣由：

• 語法錯誤會在CoffeeScript編譯時提示，這個提示針對CoffeeScript源碼，能夠預先看到（若是不修正，是不能獲得編譯後的JavaScript的）。

• CoffeeScript和JavaScript實現同一邏輯功能的結構差別較小，若是有錯誤，能夠類比推斷。

• CoffeeScript支持Source Maps，能夠在編譯同時生成.map文件，幫助調試。

其餘JavaScript的轉譯語言

能夠轉譯爲JavaScript的語言通常稱爲altJS（Alternative JavaScript）。JavaScript語言自己有較多不方便、有缺陷的地方，且自由度太高，因人和JavaScript庫的不一樣，代碼風格可能會相差很大，難於維護。所以，使用altJS將是有效的解決方法之一。

除本文介紹的CoffeeScript外，主流alsJS還有TypeScript[]。其中Haxe除JavaScript外，還能夠編譯爲其餘各種平臺的語言，如C++、C#、Java等，算是通用型編程語言。根據實際開展工做的須要，這些altJS也都值得嘗試。

結語

總的來講，CoffeeScript相比JavaScript，寫起來代碼會少一點，好用的語言特性要多一點，大概就像是在用一種更標準的形式使用JavaScript。

「它只是JavaScript」，保持這樣的心態，CoffeeScript也許能夠幫到你。

（從新編輯自個人博客，原文地址：http://acgtofe.com/posts/2014/11/have-a-cup-of-coffeescript）