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 + "...";
};
|
