CoffeeScript 筆記

最近讀了《CoffeeScript程序設計》的前半部分「核心 CoffeeScript」。對 CoffeeScript 也是有了初步的瞭解，本文只是個人隨手筆記，並無很是系統的總結 CoffeeScript 語法，想學習語法的同窗能夠看如下兩份中文材料：

• CoffeeScript中文手冊
• CoffeeScript Cookbook

爲何要用 CoffeeScript？

• 採用了 JavaScript 中的 Good Parts，符合 JS 最佳實踐
• 代碼簡潔清晰，有不少語法糖

一些特性

1.有意義的空格

CoffeeScript 移除了全部的大括號和分號。

JS 會自動在行尾添加;，但它又沒有純粹的設計爲一款不須要加分號的語言，因此有時候會引發一些蛋疼的Bug。而 CoffeeScript 會在編譯出的 JS 代碼裏每行都加;，很方便。

CoffeeScript 和 Python、Ruby 同樣，採用強制縮進（Coffee的不少地方與 ruby 相似)，這種簡潔，可讀性又很強的代碼，讓人大愛。

2.變量做用域的控制

JS 中的變量做用域一直讓人詬病。

CoffeeScript 把編譯生成的 JS 封裝在一個匿名函數中：

(function(){
  // 這裏是編譯生成的代碼
}).call(this);

這樣就巧妙避免了全局做用域的污染。同時，CoffeeScript 始終在編譯生成的 JS 代碼中用 var 聲明變量。

3.存在性判斷

CoffeeScript 中有個操做符 ?，用於檢測變量是否存在。

console.log html if html?

這句 CoffeeScript 編譯過來爲（去掉了匿名封裝函數，爲了方便，以後的編譯後代碼都去掉）

if (typeof html !== "undefined" && html !== null) {
  console.log(html);
}

可見，? 會先檢測變量有沒有定義，若是定義了再檢測是否爲 null。

4.函數和 splat 操做符

CoffeeScript 中去掉了 function 關鍵字。用 () -> 定義一個函數。括號內爲參數，能夠爲參數設置默認值。如：

myFunction = (a, b = 2) ->
  a + b

編譯爲：

var myFunction;

myFunction = function(a, b) {
  if (b == null) {
    b = 2;
  }
  return a + b;
};

調用函數的時候，還能夠不用括號。如：

myFunction 3, 5

有一點須要注意一下，CoffeeScript 會在編譯後的 JS 代碼中自動爲最後一行添加 return 關鍵字。因此不論函數的最後一行是什麼，都會成爲返回值。若是你不想讓最後一行成爲返回值，就須要另起一行本身加上 return。

splat 操做符很是強大。在你的函數須要接受可變數量的參數時就須要它了。書上的栗子：

splatter = (etc...) ->
  console.log "Length: #{etc.length}, Values: #{etc.join(', ')}"
  // CoffeeScript 中字符串插值用 #{}

splatter()
splatter("a", "b", "c")

// 輸出
Length: 0, Values: 
Length: 3, Values: a, b, c

就在某個參數後面加上...，就使傳入的參數自動轉化爲一個數組。splat 操做符能夠出如今參數列表的任意位置，可是參數列表中只能有一個 splat 操做符。

5.數組與區間

通常定義數組是這樣：

myArray = ["a", "b", "c"]

在 CoffeeScript 裏你還能夠這樣：

myArray = [
            "a"
            "b"
            "c"
          ]

• 在 JS 中判斷是否存在於數組，須要用 Array.prototype.indexOf，在 CoffeeScript 中只須要用 in：

console.log "d was not be found" unless "d" in myArray

// 輸出
d was not be found

• 交換賦值

x = "X"
y = "Y"

[x, y] = [y, x]

交換 x、y 的值就這麼簡單！

• 多重賦值

myArray = ["A", "B", "C", "D"]

[start, middle..., end] = myArray  // 可配合 splat 操做符使用

console.log "start: #{start}"
console.log "middle: #{middle}"
console.log "end: #{end}"

// 輸出
start: A
middle: B,C
end: D

• 區間

區間能讓定義包含兩個數字之間全部數字的數組變得很容易。

myRange = [1..10]
console.log myRange

// 輸出 [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

若是不想包括結束數值，能夠用 ... 代替 ..。

myRange = [10...1]
console.log myRange

// 輸出 [ 10, 9, 8, 7, 6, 5, 4, 3, 2 ]

常見的數組操做，均可以經過區間完成：

myArray = [1..10]

// 分割數組
part = myArray[0..2]
console.log part
// 輸出 [ 1, 2, 3 ]


// 替換數組值
myArray = [1..10]
myArray[4..7] = ["a", "b", "c", "d"]
console.log myArray
// 輸出 [ 1, 2, 3, 4, 'a', 'b', 'c', 'd', 9, 10 ]


// 插入值
myArray = [1..10]
myArray[4..-1] = ["a", "b", "c", "d"]
console.log myArray
// 輸出 [ 1, 2, 3, 4, 'a', 'b', 'c', 'd', 5, 6, 7, 8, 9, 10 ]

6.類和繼承

一例勝千言：

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    alert "Galloping..."
    super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"

sam.move()
tom.move()

這是官網的例子，麻麻不再用擔憂我在 JS 裏使用類和繼承了 T_T。

• consturctor 函數爲類的構造函數。在 new 的時候調用，能夠重寫它。
• :: 就和 JS 裏的 prototype 同樣

不少語法糖

我對「語法糖」的理解就是讓代碼的讀寫更簡單。

CoffeeScript 中添加了一些關鍵字，如 unless when then until do 等。不只如此，CoffeeScript 引入了不少別名來代替一些關鍵字：

別名	對應關鍵字
is	===
isnt	!==
not	!
and	&&
or	||
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	no JS equivalent

運用別名和新關鍵字，使代碼讀起來就和普通的英文同樣。並且 CoffeeScript 還自動爲你添加關鍵字，如函數最後的 return，switch 後自動添加 break（這種符合咱們惰性的改進都是偉大的！ヽ( ^∀^)ﾉ）。

安裝及用法

1.安裝：

npm install -g coffee-script

2.用法：

安裝完成後，直接在命令行中輸入 coffee，就進入了 CoffeeScript 的 REPL（Read-eval-print-loop） 模式，這是一個可交互的控制檯，你能夠輸入 CoffeeScript 代碼當即執行。如圖：

也能夠用指令編譯 CoffeeScript 代碼執行（CoffeeScript 代碼文件後綴名爲 coffee）：

coffee -c hello_world.coffee

還有一些其餘選項，我目前用的最多的是 -o、-p、-w 這三個。

-o 即 --output，設置編譯後 JS 文件輸出到指定文件夾
-p 即 --print ，直接在終端打印出編譯後的 JS 代碼
-w 即 --watch，監視文件改變，一有變化就從新執行這條指令

coffee -c hello_world.coffee -o ./js -w

搭配起來就能夠邊寫邊編譯到指定文件夾。

其餘

有篇文章《CoffeeScript: The beautiful way to write JavaScript》，對 JS 和 CoffeeScript 的論述很中肯。但文中對「什麼纔是優美的代碼」的總結更讓人印象深入：

• beautiful code uses the least amount of code to solve a given problem
• beautiful code is readable and understandable
• beautiful code is achieved not when there is nothing more to add, but when there is nothing left to take away (just like great designs)
• the minimal length is a side-effect of beautiful code and not a goal or a measure

參考文獻

• 《CoffeeScript 程序設計》
• CoffeeScript 官網

---

原文連接：CoffeeScript 筆記