# 當 jQuery 遇上 CoffeeScript

> 

Published: 2011-11-14
URL: https://kaochenlong.com/when-jquery-meets-coffeescript

---

上週的[PHPConf Taiwan](http://phpconf.tw/2011)，有幾位朋友在會後問我[CoffeeScript](http://jashkenas.github.com/coffee-script/)要怎麼樣跟 jQuery 之類的 framework 整合在一起，會不會打架? 基本上是不會的，CoffeeScript 寫出來的東西就是 JavaScript，如果會打架，那表示你即使不用 CoffeeScript 來寫也一樣打架了。

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

<!-- more -->

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

```coffee
$pokemon = $('#pikachu')
```

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

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

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

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

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

如果你是用這種寫法：

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

改成 CoffeeScript 則是：

```coffee
$ ->
  alert "hello, jQuery"
```

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

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

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

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

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

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

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

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

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