# CoffeeScript 簡介 > Published: 2011-08-03 URL: https://kaochenlong.com/coffeescript-introduction --- ### 什麼是 CoffeeScript? 簡單的說，**它就是 JavaScript 啦**，只是用不同的程式語言來寫而已。 ### 為什麼選擇 CoffeeScript? 不少 JavaScript 社群，包括 JavaScript 的老爸[Brendan Eich](http://en.wikipedia.org/wiki/Brendan_Eich)，也對它讚譽有加，有社群及大神的背書，加上 Rails 3.1 之後會把 CoffeeScript 變成預設支援，是我選擇它的原因之一。不過對我個人來說，CoffeeScript 的語法感覺像是 [Python](http://python.org/) 跟 [Ruby](http://www.ruby-lang.org/) 的混合體，從這些語言身上借了一些我個人很愛的元素，加上對我個人來說學習的負擔不算太大，這才是我選擇它最主要的原因(聽說 CoffeeScript 還有向 Haskell 取經，不過我跟它不熟)。 <!-- more --> ### 從 Python 借來的： - 使用縮排（identation）來取代大括號，這一直是我的菜，我有程式碼潔癖！ - 簡單好用的 List Comprehension 語法，在 CoffeeScript 也可以用（雖然用起來有那麼一點點不太一樣）。 ### 從 Ruby 借來的： - 有 if modifier 可以用，可以把 if 寫在句子後面，也有 unless 可以用。 - 在呼叫方法以及邏輯判斷的時候，可以視情況省略小括號。 - 每行行尾不用分號（其實 Python 也是）。 - 不用特別寫 return，最後的執行結果就是回傳值。 - 有類似 irb 的 console 介面模式可以用。 ### 優缺點 #### 好處? - 程式碼會變短，變得容易閱讀，也更容易抓出問題來，即使是以 OOP 的方式來寫 JavaScript，語法看起來也是相當清楚。 - 經過 CoffeeScript 編譯出來的 JavaScript，因為它在編譯的時候有做最佳化，而且這些最佳化可能是我們這種小兵不知道的技巧，某些情況下的編譯出來的效能可能比我們一般手寫的要來得好。 - 不會有因為變數 Scope 而混淆程式語意或造成或 memory leak 的問題。 - 編出來的 js 檔丟給 [JSLint](http://www.jslint.com/) 檢查不會跳出一堆抱怨。 #### 缺點? - 你可能得再花時間再熟悉一門程式語言，不過如果你本來就熟悉 Python 或 Ruby 的話，其實負擔並不大，而且老實說 Python/Ruby 也沒很難學。 ### FAQ #### Q: 學 CoffeeScript 就可以取代一般的 JavaScript 嗎? A: 也許可以取代，但這不代表你就不用學 JavaScript，如果你並不熟悉 JavaScript 是怎麼一回事，你應該也不知道你要拿 CoffeeScript 來取代什麼東西。最一開始也提到，CoffeeScript 就只是 JavaScript 而已，所以原本該花時間在學習 JavaScript 的，不會因為 CoffeeScript 而省下來的。 #### Q: CoffeeScript 聽說要編譯成 `*.js` 檔才能用? A: 是的。但如果你不想編譯，透過在瀏覽器裡直接引入 compiler 也可以讓瀏覽器看得懂 `*.coffee`，只是通常實務上還是會把編成 `*.js` 檔。BTW, CoffeeScript 的 compiler 本身也是用 CoffeeScript 寫的，自己寫自己，這點光是聽起來就很酷。 #### Q: 改用 CoffeeScript 的話，是不是之前寫的 JavaScript 都得整個打掉重寫？ A: 也不用啦，**CoffeeScript 的目的並不是取代原來的 JavaScript，而是用更簡單、清楚的語法來寫 JavaScript**，所以原來寫好的就留著吧，除非你也覺得寫得不好，加上手癢想練功。而且如果你想在 CoffeeScript 裡直接使用一般 JavaScript 的語法也是 ok 的，CoffeeScript 可以讓你把一般的 JavaScript 語法 embed 在 CoffeeScript 裡。 #### Q: CoffeeScript 可以把 .coffee 檔編譯成 .js 檔，那也有工具可以把 js 檔轉成 coffee 檔的嗎? A: 有的，有個工具叫做 [js2coffee](http://ricostacruz.com/js2coffee/)，你可以在線上玩看看，也可以透過 npm 安裝到你的電腦裡。 #### Q: 有開發工具嗎? A: CoffeeScript 的官網有列了[一些工具](https://github.com/jashkenas/coffee-script/wiki/Text-editor-plugins)供參考。不過寫 CoffeeScript 只要一般的文字編輯器就行了，如果你沒有特別偏好的文字編輯器，我推薦你使用 vim，它是個免費又功能強大的文字編輯器，投資時間學一下它保證不會後悔的。vim 有一堆很威的 plugin 可以用，我從 pct 那邊 fork 了他的 vim 設定，也把 CoffeeScript 的外掛加上去了 <https://github.com/kaochenlong/pct.vim> （PS： 其實[pct 的版本](https://github.com/pct/pct.vim)就有加上這功能了..） 如果你是用 Textmate，恭喜你 CoffeeScript 的作者有放出了個方便的 [bundle](https://github.com/jashkenas/coffee-script-tmbundle) 可以用。除了一些方便的 snippet 以及程式碼顏色亮度之外，還可以讓你很簡單的執行/檢視你的 coffee 檔到時候編譯成 js 檔的樣子。 Microsoft 的 Visual Studio 2010 最近也有一個[免費的 web workbench 套件](http://www.mindscapehq.com/products/web-workbench)可以用，讓 VS 也開始支援[Sass](http://sass-lang.com/)、[Less](http://lesscss.org/)以及[CoffeeScript](http://jashkenas.github.com/coffee-script/)。 #### Q: 有書可以參考嗎? A: 在這個當下，剛好有一本 [CoffeeScript: Accelerated JavaScript Development](http://pragprog.com/book/tbcoffee/coffeescript)，不過我想官網的資料相當完整，看完你就差不多知道怎麼用了。 另外還有一些不錯的學習資源： - [Smooth CoffeeScript](http://autotelicum.github.com/Smooth-CoffeeScript/) - [CoffeeScript Cookbook](http://coffeescriptcookbook.com/) - [The Little Book on CoffeeScript](http://arcturo.github.com/library/coffeescript/index.html)