當 jQuery 遇上 CoffeeScript

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

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

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

$pokemon = $('#pikachu')

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

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

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

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

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

如果你是用這種寫法：

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

改成 CoffeeScript 則是：

$ ->
  alert "hello, jQuery"

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

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

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

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

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

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

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

(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 寫會長這樣：

$ = 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 居多，所以會把自己之前寫的一些東西也慢慢的轉過來（但其實也沒多少程式碼），順便當做練功。