月份: 2016 年 7 月

目前開始學習使用CoffeeScript，來自我筆記一下，歡迎討論指教喔！

簡單介紹

CoffeeScript是JavaScript的一個編譯語言，簡單來說明就是寫CoffeeScript，然後CoffeeScript的編譯器再轉換成JavaScript。

至於為什麼要用CoffeeScript？我想可讀性和便利性是最大的主因，一個好的程式語言要有三大條件：寫少做多、易於閱讀、方便維護，而CoffeeScript就是為了改善JavaScipt而誕生的，從以下的介紹便會開始了解CoffeeScript方便的地方。

CoffeeScript安裝與指令

安裝步驟

1. 安裝 node.js
2. 安裝 npm
3. npm install -g coffee-script

CoffeeScript指令

• coffee -h – 查看CoffeeScript指令
• coffee -c foobar.coffee – 將foobar.coffee編譯成foobar.js
• coffee -cw foobar.coffee – 當foobar.coffee有變更就會自動編譯成js檔
• coffee -c src -o js – 將src內所有coffee檔編譯成js檔，存到js資料夾
• coffee -cw src -o js – src內的檔案有變更時，就會自動轉換並編譯到js資料夾

變數宣告

在CoffeeScript裡面，我們不用去理會變數宣告，CoffeeScript會自動幫我們處理變數宣告這一塊，不用自己寫一堆var，並且確保我們的變數在想要的地方執行，我們只要在我們想要的時候使用變數就可以了，還有，CoffeeScript可以不用分號結尾，這點真是不錯。

感謝CrazyLion補充：JavaScript也沒有要求要分號結尾！只是在學習時都有分號結尾
查了之後才知道，原來是壓縮程式碼時，沒分號有時候會產生問題。

CoffeeScript

foo = "Coffee"
bar = "Script"
alert ( foo + bar ) #CoffeeScript

JavaScript

var bar, foo;
foo = "Coffee";
bar = "Script";
alert(foo + bar);

樣板字串

我們如果要用一堆變數串成一個字串，要放入一堆加號，什麼"Answer is " + ans +"."，感覺就是非常地麻煩，coffee只要寫成 "Answer is #{ans}." 就完美解決了，注意！一定要用雙引號包起來，單引號只會顯示#{ans}，而不會顯示ans內的數值！順便一提，ES6也趕緊加入了${foo}樣板字串的概念XD

CoffeeScript

ans = "Script"
alert ( "Coffee#{ans}" )

JavaScript

var ans;
ans = "Script";
alert ( "Coffee" + ans );

函式

JavaScript最重要的function，在CoffeeScript裡變得十分簡單，本來的匿名函式寫法是 function(){ … } ，在CoffeeScript裡面，只要 () -> … 就解決了。

• 用縮排取代大括號
• 函式沒有儲存參數時，可以省略小括號

foobar = () ->
	alert ( "foobar" )
#等於
foobar = ->
	alert ("foobar")

• coffee永遠有個return value，會自動return該function的最末端

CoffeeScript

cookies = ->
	confirm "Do you want some cookies?";

JavaScript

var cookies;
cookies = function() {
	return confirm("Do you want some cookies?");
};

呼叫函式

學會怎麼定義函式後，當然也要知道該如何呼叫它，有以下幾種方式。

• 不傳入參數
  • coffee()
• 傳入參數(小括號是可以省略的)
  • coffee( “foo”, “bar” , true)
  • coffee “foo”, “bar” , true
• 傳入的參數有函式時，即使該函式也要傳入參數，也可以忽略小括號(但建議除了最外面的小括號，其餘小括號不要省略)

CoffeeScript

confirm = (reallyWant) ->
	if reallyWant
		true
 
plus = (a , b, ifPlus ) ->
	if ifPlus
		result = a + b
	else
		result = a
	"Answer is #{result}"
 
alert plus 20, 10, confirm true

JavaScript

var confirm, plus;
 
confirm = function(reallyWant) {
	if (reallyWant) {
		return true;
	}
};
 
plus = function(a, b, ifPlus) {
	var result;
	if (ifPlus) {
		result = a + b;
	} else {
		result = a;
	}
	return "Answer is " + result;
};
 
alert(plus(20, 10, confirm(true)));

延伸閱讀：jQuery with CoffeeScript