高見龍

Developer & Instructor, 喜愛非主流的新玩具 :)

當jQuery遇上CoffeeScript

上週的PHPConf Taiwan，有幾位朋友在會後問我CoffeeScript要怎麼樣跟jQuery之類的framework整合在一起，會不會打架? 基本上是不會的，CoffeeScript寫出來的東西就是JavaScript，如果會打架，那表示你即使不用CoffeeScript來寫也一樣打架了。

我們來看看要怎麼把jQuery跟CoffeeScript放一起。

簡單的說，就跟你平常在用jQuery沒什麼兩樣，例如你要取得頁面上某個元素：

1

$pokemon = $('#pikachu')

就可以取得頁面上某個id叫做pikachu的元素(這例子是從那本CoffeeScript的書上借來的 orz)。

再來，你可能寫過這樣的程式：

1
2
3

$().ready = function(){
  alert("hello, jQuery");
};

就是在頁面載入完成後跟你打聲招呼的程式，在CoffeeScript裡你就這樣寫：

1
2

$().ready = ->
  alert "hello jQuery"

如果你是用這種寫法：

1
2
3

$(function() {
  alert("hello, jQuery");
});

改成CoffeeScript則是：

1
2

$ ->
  alert "hello, jQuery"

其實寫法跟原來的寫法沒什麼兩樣，就一樣$給它用下去吧。

你可能也寫過類似這樣的東西：

1
2
3
4
5

$(function(){
  $('h1').click(function() {
      $(this).html('I am clicked');
  });
});

意思是「點擊h1元素之後改變它的內容」，改成用CoffeeScript寫的話：

1
2
3

$ ->
  $('h1').click ->
    $(@).html 'I am clicked'

好像已經簡單到我都不好意思要寫這篇了..

如果要寫jQuery的Plugin呢? 舉個簡單的例子，例用Regular Expression來檢查Email格式的小程式，原本可能會長得像這樣：

1
2
3
4
5
6
7

(function($){
  $.fn.extend({
    isEmail: function(email){
      return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(email);
    }
  });
})(jQuery);

改成用CoffeeScript寫會長這樣：

1
2
3
4
5

$ = jQuery

$.fn.extend
  isEmail: (email) ->
    /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test email

少了一些不必要的大括號跟小括號以及分號，看起來真的清爽多了 :)

另外也有朋友問到，如果CoffeeScript這麼威的話，要不要乾脆把之前寫的JavaScript程式碼全部port成CoffeeScript嗎? 我想這問題的答案就由各位自己評估了。我是因為自己爾後的案子應該會用到Rails 3.x居多，所以會把自己之前寫的一些東西也慢慢的轉過來(但其實也沒多少程式碼)，順便當做練功。

Comments