CoffeeScript 初學

用 CoffeeScript 一行常常可以達到 JavaScript 三五行的效果,而且簡化的語法大幅縮減了開發所需要的時間,所以最近 CoffeeScript 開始流行了起來。

———–
安裝環境

Coffee Script 可以用 Node.js 的套件管理軟體 npm 來安裝

先去
http://nodejs.org/
上面下載 Node.js

現在的 Node.js 版本是 v0.10.21 裡面都會直接內建安裝好 npm

所以可直接在 command line 輸入

$ npm install -g coffee-script

接著就可以在 command line使用 CoffeeScript

$ coffee [options] path/to/script.coffee

Option 有以下幾種:
-c, –compile           : 編譯成 js 檔
-i,  –interactice     : 跑互動 REPL
-m, –map                  :產生資源地圖
-o,  –output [DIR]: 設定編譯後的資料夾
-w,  –watch              : 修改並重新編譯
-p,  –print                  : 列印編譯的 js 到標準輸出
-e,  –eval                   : 從 command line 編譯一個字串

接著開始介紹 CoffeeScript 語法

——
var

* CoffeeScript 會幫你自動宣告 var
* 用縮排來達到原本 js 括號的效果
* 不需要分號

message = "Are you ok ?"
alert(message)

編譯成 js 後會變成

var message;
message = "Are you ok ?";
alert(message);

——-
function

* CoffeeScript 的 function是用 -> 來表示
* -> 的前面可以用小括號加入參數,寫了等於表示預設值
* 如果是最後一行 return 的話不需要寫 return
* 變數可以直接用 #{ } 放進字串,等同於加在外面

returnAnswer = (message = "No Message!") ->
  answer = confirm message
  "Your answer is #{answer}"

編譯成 js 後變成

var returnAnswer;
returnAnswer = function(message) {
  var answer;
  if (message != NULL) {
    message = "No Message!";
  }
  answer = confirm(message);
  return "Your answer is" + answer;
}

—————
用 CoffeeScript 也能寫 jQuery

* 可以把 jQuery(function($) { }); 直接寫成 $ ->
* this 可以用 @ 取代

jQuery(function($) {
  function changeHighlightTab(e) {
    e.preventDefault();
    $("#tabs li a.highlight").removeClass("highlight");
    $(this).addClass("highlight");
  }
  $("#tabs ul li a").click(changeHighlightTab);
});

可以寫成這樣

$ ->
  changeHighlightTab = (e) ->
    e.preventDefault()
    $("#tabs li.highlight").removeClass "active"
    $(@).addClass "active"

  $("#tabs ul li a").click changeHighlightTab

—————–
運算子

CoffeeScript JavaScript
== is ===
!= isnt !==
not !
and &&
or ||
true yes on true
false no off false

CoffeeScript 在運算子提供了更多語意上的選擇

例如:

// 如果不是飲料的話加水
addWater() if not Drink()

// if not == unless
addWater() unless Drink()

—————–
if 運算式

if (price > 100) {
alert('too expensive!');
}

可以把括號都省掉並寫成一行

if price > 100 then alert 'too expensive!'

有 else 的情況

if (price > 100) {
alert('too expensive!');
} else {
alert('not expensive');
}

可以把上面的 js 寫成這樣一行

if price > 100 then alert 'too expensive!' else alert 'not expensive'

——————-

Chained Comparison

兩個比較的式子

if (50 < price && price <100) {
  alert("In Range");
}

可以寫成

if 50 < price < 100
  alert "In Range"

——————-

Switch

var message = (function() {
  switch (messageNumber) {
    case 0:
      return 'WOW';
    case 1:
      return 'YOOOOOOO';
    case 2:
      return 'HI';
    default:
      return 'Are you ok?';
  }
})();

CoffeeScript 簡化成

message = switch messageNumber
  when 0 then 'WOW'
  when 1 then 'YOOOOOOO'
  when 2 then 'HI'
  else 'Are you ok?'

———-

存在運算子

JavaScript 要檢查變數是否存在是必須檢查型別不為 undefined 跟 不等於 null

if (typeof thisVar !== "undefined" && thisVar !== null) {}

CoffeeScript想要簡化這個常用的步驟
就變成

if thisVar?

非常的方便!!!

還可以用

// 如果不存在設為 0
thisVar ?= 0

這樣的簡單的設值方法

// 如果存在就執行 method
thisVar?.doMethod()
// 也可以一串 method 都檢驗
thisVar.doMethod?().doMethod2?()

————-

Ranges

range = [1..5]
// 兩個點包括尾數
var range = [1, 2, 3, 4, 5]
range = [1...5]
// 兩個點排除尾數
var range = [1, 2, 3, 4]

也可以用變數跟 subset 來操作

start = 3
end = 8
// [3, 4, 5, 6, 7, 8]
range = [start..end]
// [4, 5, 6]
range[1..3]
// [5, 6, 7, 8] . same as range[2..-1]   
range[2...range.length]

——————

CoffeeScript的陣列

可以用空行來取代逗號

students = [
  'Leo'  
  'Mimi'
  'Amy'
]

——————-

迴圈

可省略繁雜的forEach寫法


alert "Student: #{student}" for student in students

可以加入 when 來過濾


alert "Student: #{student}" for student in students when student isnt 'Amy'

——————-

變動數目的參數

searchLocations = (name, cities...) ->
  "looking for #{name} in #{cities.join(',')}"
// looking for Leo in Taipei, Tainan
searchLocations 'Leo', 'Taipei', 'Tainan'

———————

CoffeeScript物件

可以用換行來取代逗號


coffee =
  name: 'French'
  strength: 1
  brew: -> alert("brewing #{@name}")

物件的迭代 iteration

若有一個 coffees 物件裡面有許多 coffee 物件
就可以用下面這行來 iterate 每個 coffee

"#{coffee}" strength: #{attrs.strength} for coffee, attrs of coffees

————-

建構式

class Person
  constructor: (@name, @age=23) ->

這樣寫的效果就是把 getter, setter 還有預設值直接靠一行設定好

效果就等於

class Person
  constructor: (name, age=23) ->
    @name = name
    @age = age 

————–

繼承

class Male extends Person
  constructor: (@name, @age=23) ->
    @sex = "Male"

可以在建構式上面做修改

————-

雙箭頭 fat arrow =>

function 中 要參考自身的元素 把 -> 改成 =>
所有元素就可以省略 this 去引用

class Person
  constructor: (@name, @age=23) ->

  somethingClick: ->
    $("#btn-#{@name}").click (event) =>
      if @age isnt 23
        alert "age isn't 23"

直接綁到 this 上

————-

更多資料跟用法可以參考官網
http://coffeescript.org/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s