CoffeeScript 學習手扎

This is makzan’s new book about CoffeeScrite, written in Chinese. The book is in very early work-in-progress stage. For english reader, I recommend these books from great authors of the CoffeeScript community.

版本：0.1.0

CoffeeScript 定義變量 (Variable)

在這一節，我們會介紹以下事項：

變數定義 (Variable)
函數定義 (Function)

CoffeeScript 定義變量 (Variable)

JavaScript

1var name = "Thomas";
2var greeting = "Good morning " + name

CoffeeScript

1name = "Thomas"
2greeting = "Good morning #{name}"

在 CoffeeScript，定義變量會自動加 var，所以不用自己寫，原因是若忘記了加 var，就會變成全域變量，所以 CoffeeScript 硬性規定全部自動加 var。加了 var 反而會有編譯錯誤。

其次，行末的分號是是自動加的。

而字串連接 (String Concat)，因為是經常要用的操作，所以 CoffeeScript允許我們用雙引號的字串中，用 #{variable_name} 來替換變量值。當然，傳統的字串相加還是可以用的。

side info 用 escape 來避開自動加 var.

生成的 JavaScript

1(function() {
2  var greeting, name;
3  name = "Thomas";
4  greeting = "Good morning " + name;
5}).call(this);

解釋 var 自動生成。而 #{name} 也會編譯成 String Concat Annonymous Function .call(this)

變量 (Variable) – 快速練習

1var age = 30;
2var name = "Mary";
3var result = name + " is " + age + " years old.";
4console.log(result);

Correct Answer

1age = 30
2name = "Mary"
3result = "#{name} is #{ago} years old."
4console.log(result)

函數 (Function)

JavaScript

1var hello = function() {
2  // do something in hello function
3}

CoffeeScript

1hello = ->
2  # do something in hello function

注意，第二行是有2個空格的。因為 CoffeeScript 是以2個空格的 intentation 來做 scoping 的。

而附註 (Comment) 則使用 #號而非 // 號。

function 整個用 -> 代替。如果有 argument，則使用以下方法：

1hello = (message) ->
2  alert "hello #{message}"

於 -> 前用 (argument)。

於瀏覽器快速預覽 CoffeeScript 編譯結果

CoffeeScript 需要 node.js 來運行 Coffee 指令作編譯。如果想快速嘗試 CoffeeScript，可以到 CoffeeScript.org 上方有一個 Try CoffeeScript 的按鈕，打開後可以於左方試寫 CoffeeScript，右方得出編譯後的 JavaScript 結果。

[[ screenshot ]]

又或者另一個第三方出品的網上 JS <=> Coffee 轉換器 js2coffee，這個的好處是雙向轉換，對初學者而言，可以將現有的JavaScript放進去，反轉換成CoffeeScript，對學習如何編寫CoffeeScript有一定幫助。

[[ screenshot ]]

直接於瀏覽器運行 CoffeeScript

另一個快速試玩 CoffeeScritp 的方法是使用於瀏覽器運行的 JavaScript 版本 CoffeeScript Compiler。

只需要在瀏覽器中載入 <script src=‘http://coffeescript.org/coffee-script.js></script>

（當然，也可以自己 Host 那個 Coffee-Script.js 檔案）

然後，我們便可以直接在 HTML 中使用 <script type=‘text/coffeescript’> </script> 直接編寫 CoffeeScript。而其內容則會由 Coffee-Script.js 編譯器於瀏覽器執行時即時編譯為 JavaScript 來執行。

這個做法的好處是可以快速試玩 CoffeeScript，但不好處是瀏覽器每次載入網頁都要將 CoffeeScript 先編譯才能執行，對 Performance 會有一個很大的影響。

安裝CoffeeScript 編譯器

長遠來說，我們還是有一個編譯器會比較好，因為真實開發時我們不會將 CoffeeScript 放在瀏覽者的瀏覽器內編譯，這樣會令代碼執得得比較慢。要在自己的開發環境將 CoffeeScript 編譯成 JavaScript，有以下方法：

使用官方的編譯器
使用第三方軟件

使用官方的編譯器

LiveReload
CodeKit
Grunt

使用官方的編譯器

CoffeeScript 的 CLI 系統指令模式是基於 Node.js 還境運行的。Node.js 是一套讓我們在 Terminal Shell 運行 JavaScript 的套件。由於 CoffeeScript 本身就是用 CoffeeScript 寫出來，再成為 JavaScript 版本的編譯器。所以順理成章地，要在 Shell 運行就需要到 Node.js。

安裝 Node.js

若並未安裝 Node.js，可以到 nodejs.org 下載安裝最新版。跟來的 node.js 會附加一個 npm 指令，全稱為 node package manager，用於管理及安裝不同的基於 node.js 的軟件。

安裝 Coffee-Script 套件

Node.js 的插件分兩種儲存方法，Current Directory 現有目錄及全系統，若只安裝到現有目錄，則只有現有目錄下才可以執行相關指令，其安裝方式為：

npm install coffee-script

若要安裝到全系統均能使用，則需要 --global (或 -g) flag。而且通常需要 sudo 權限來執行：

sudo npm install -g coffee-script

Coffee 指令用法

使用方法如下：

在 Terminal 變更目錄至項目裝有 CoffeeScript 的目錄下，執行以下 coffee 指令：

1$ coffee —watch —compile .

或

1$ coffee -wc

簡介 Node.js

app.js

1console.log("Hello Node");

或是 app.coffee

1console.log "Hello Node"

用 Node 來運行，會得出以下結果

1$ Node app.js
2$ Hello Node

Loop

學好循環是另一個 CoffeeScript 的重點。

以下是一個頗為常見的 JavaScript 算法，在一個集合內尋找合適的值，放入結果集合內，再將之返回。

 1data.findBooksByIsbns = function(isbns) {
 2  var result = [];
 3  for(var i=0, len=data.books.length; i<len; i++) {
 4    var book = data.books[i];
 5    if (_.contains(isbns, book.isbn)) {
 6      result.push(book);
 7    }
 8  }
 9  return result;
10};

在 CoffeeScript，因為有 for-in-when 的寫法，可以變成以下一句。亦因為 CoffeeScript 算動將最後一行加 return，所以整句就便得將陳述句一樣：在 books 集合內的每一個項目 (book)，當附合條件時，返回 book。

1data.findBooksByIsbns = (isbns) ->
2  book for book in books when _.contains(isbns, book.isbn)

[ graph of how the javascript 'variables' transform into for-in-when syntax ]