高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

CoffeeScript 簡介

什麼是CoffeeScript?

簡單的說,它就是JavaScript啦,只是用不同的程式語言來寫而已。

為什麼選擇CoffeeScript?

不少JavaScript社群,包括JavaScript的老爸Brendan Eich,也對它讚譽有加,有社群及大神的背書,加上Rails 3.1之後會把CoffeeScript變成預設支援,是我選擇它的原因之一。不過對我個人來說,CoffeeScript的語法感覺像是PythonRuby的混合體,從這些語言身上借了一些我個人很愛的元素,加上對我個人來說學習的負擔不算太大,這才是我選擇它最主要的原因(聽說CoffeeScript還有向Haskell取經,不過我跟它不熟)。

從Python借來的:

  • 使用縮排(identation)來取代大括號,這一直是我的菜,我有程式碼潔癖!
  • 簡單好用的List Comprehension語法,在CoffeeScript也可以用(雖然用起來有那麼一點點不太一樣)。

從Ruby借來的:

  • 有if modifier可以用,可以把if寫在句子後面,也有unless可以用。
  • 在呼叫方法以及邏輯判斷的時候,可以視情況省略小括號。
  • 每行行尾不用分號(其實Python也是)。
  • 不用特別寫return,最後的執行結果就是回傳值。
  • 有類似irb的console介面模式可以用。

優缺點

好處?

  • 程式碼會變短,變得容易閱讀,也更容易抓出問題來,即使是以OOP的方式來寫js,語法看起來也是相當清楚。
  • 經過CoffeeScript編譯出來的JavaScript,因為它在編譯的時候有做最佳化,而且這些最佳化可能是我們這種小兵不知道的技巧,某些情況下的編譯出來的效能可能比我們一般手寫的要來得好。
  • 不會有因為變數scope而混淆程式語意或造成或memory leak的問題。
  • 編出來的js檔丟給JSLint檢查不會跳出一堆抱怨。

缺點?

  • 你可能得再花時間再熟悉一門程式語言,不過如果你本來就熟悉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,你可以在線上玩看看,也可以透過npm安裝到你的電腦裡。

Q: 有開發工具嗎?

A: CoffeeScript的官網有列了一些工具供參考。不過寫CoffeeScript只要一般的文字編輯器就行了,如果你沒有特別偏好的文字編輯器,我推薦你使用vim,它是個免費又功能強大的文字編輯器,投資時間學一下它保證不會後悔的。vim有一堆很威的plugin可以用,我從pct那邊fork了他的vim設定,也把CoffeeScript的外掛加上去了 https://github.com/kaochenlong/pct.vim (PS: 其實pct的版本就有加上這功能了..)

如果你是用Textmate,恭喜你CoffeeScript的作者有放出了個方便的bundle可以用。除了一些方便的snippet以及程式碼顏色亮度之外,還可以讓你很簡單的執行/檢視你的coffee檔到時候編譯成js檔的樣子。

Microsoft的Visual Studio 2010最近也有一個免費的web workbench套件可以用,讓VS也開始支援SassLess以及CoffeeScript

Q: 有書可以參考嗎?

A: 在這個當下,剛好有一本”CoffeeScript: Accelerated JavaScript Development“,不過我想官網的資料相當完整,看完你就差不多知道怎麼用了。

另外還有一些不錯的學習資源:

Comments