coffeescript语法入门

ref：http://www.dotblogs.com.tw/alonstar/archive/2011/08/31/coffeescript_syntax.aspx

昨天花了點時間把官網的都玩過之後，有幾個比較有趣和要注意的地方：（為了比較容易看懂差異，所以同時貼了編譯後的結果，左邊的是CoffeeScript，右邊的是JavaScript）

 

1.程式碼排版

因為Coffee使用排版的方式來區分區塊（tab），所以在寫的時候要注意，例如if的區塊表現：

if elvis     alert "oh oh "     evlis = 3	if (elvis) {   alert("oh oh ");   evlis = 3; }
if elvis      alert "oh oh " evlis = 3	if (elvis) {   alert("oh oh "); } evlis = 3;

少個tab就差很多了呦。

 

2.函式宣告

在函式宣告的時候，他預設會把你寫的最後一行當做回傳值，但是如果不要，可以加個return，例如：

fill = (x) ->   x * x	var fill; fill = function(x) {   return x * x;  };
fill = (x) ->   x * x   return	var fill; fill = function(x) {   x * x; };

 

3.文字套版

這個是我覺得最愛的地方，因為JavaScript沒有String.format這種東西（雖然ASP.NET AJAX有函式啦…）

#迴圈&套版 eat = (x) -> alert "I eat #{x} !" eat food for food in ['toast', 'cheese', 'wine']

eat = function(x) {   return alert("I eat " + x + " !"); }; _ref = ['toast', 'cheese', 'wine']; for (_i = 0, _len = _ref.length; _i < _len; _i++) {   food = _ref[_i];   eat(food); }

從這邊就可以看出來Coffee超省事的！

 

4.區間使用

Coffee有一個長的像Java一樣「…」的東西，例如：

#...表示區間  numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] copy    = numbers[0...numbers.length] middle  = copy[3...6]

numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; copy = numbers.slice(0, numbers.length); middle = copy.slice(3, 7);

 

這個在函式參數也可以用，那個參數可以直接當做陣列來使用

awardMedals = (first, second, others...) –>   gold = first   silver = second   rest = others[3]   return

awardMedals = function() { var first, others, second; first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? __slice.call(arguments, 2) : []; gold = first; silver = second; rest = others[3]; };

 

5.物件化寫法

Coffee可以讓程式看起來像是一般OO語言一樣：

# @name 表屬性, super 呼叫原父類的方法 class Animal   constructor: (@name) ->   move: (meters) ->     alert @name + " moved #{meters}m." class Snake extends Animal   move: ->     alert "Slithering..."     super 5 sam = new Snake "Sammy the Python" sam.move()

var Animal, Snake, sam; var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {   for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }   function ctor() { this.constructor = child; }   ctor.prototype = parent.prototype;   child.prototype = new ctor;   child.__super__ = parent.prototype;   return child; }; Animal = (function() {   function Animal(name) {     this.name = name;   }   Animal.prototype.move = function(meters) {     return alert(this.name + (" moved " + meters + "m."));   };   return Animal; })(); Snake = (function() {   __extends(Snake, Animal);   function Snake() {     Snake.__super__.constructor.apply(this, arguments);   }   Snake.prototype.move = function() {     alert("Slithering...");     return Snake.__super__.move.call(this, 5);   };   return Snake; })(); sam = new Snake("Sammy the Python"); sam.move();

 

6.超直覺的大小比較

把三個數值的大小比較直接串一起～

cholesterol = 127 healthy = 200 > cholesterol > 60

var cholesterol, healthy; cholesterol = 127; healthy = (200 > cholesterol && cholesterol > 60);

 

7.關於「==」和「!=」之類的邏輯比較

在Coffee裡，他沒有「==」，而是一律使用「===」，所以也沒有「!=」，只有「!==」。所以使用上會更加嚴謹哦！（在JavaScript裡，==和===的差異在型別比較）

 

8.同時判斷是否定義及null的方式

Coffee有個可以簡便使用來判斷參數值是否已定義或是null，就是「?」

if elvis?     alert "oh oh "     evlis = 3

if (typeof elvis !== "undefined" && elvis !== null) {   alert("oh oh ");   evlis = 3; }

 

9.函式參數預設值

JavaScript在使用函式給參數時，可以不需要全部賦值，但又想要在他沒賦值的情況下給預設值怎辦呢？直接在宣告函式的時候先指定就可以了！

fill = (container, liquid = "coffee") ->   "Filling the #{container} with #{liquid}..."

var fill; fill = function(container, liquid) {   if (liquid == null) {     liquid = "coffee";   }   return "Filling the " + container + " with " + liquid + "..."; };