高見龍

iOS app/Ruby/Rails 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