jQueryは長ったらしいJavaScriptの構文をシンプルに書く方向へと導いてくれた物ですが、
ジャワをコーヒーに置き換えることで、よりシンプルに書くことができます。

例えば、コールバック関数

コールバック関数内でthisの中身を変更したい時、こんな書き方になると思います。

$('#foo').click($.proxy(function() {
     this.bar();
}, this));

あるいはこう。

var self = this;
$('#foo').click(function() {
     self.bar();
});

ですが、CoffeeScriptだとこう書けます。

$('#foo').click => @bar()

超絶すっきりですね。

ちなみにこのCoffeeScriptは以下のようなJavaScriptにコンパイルされます。

var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
$('#foo').click(__bind(function() {
  return this.bar();
}, this));

最初のJavaScriptのパターンとほぼ同じですね。

ちなみに…

連鎖していきたいときは以下のような感じで書けます。

$('#foo').click(=> @bar()).dblclick(=> @baz())

また、以下のようにも書けます。

$('#foo').click(=> @bar()).dblclick => @baz()

$('#foo').click(=> @bar())
  .dblclick => @baz()

まぁ、お好きなのをどうぞ。

Defferedと組み合わせるとより幸せに

コールバックといえばもうひとつ。忘れてはならないAjax。
普通にJavaScriptで書くとこんな感じになります。

$.post(
     url, data
).success($.proxy(function(c) {
     alert('成功したよ');
}, this)).fail(function() {
     alert('失敗したよ');
}).always(
     bar
);

ごちゃごちゃ文字が多くて見えにくい感じになってしまいますが、
CoffeeScriptだとこう書けます。

$.post(
  url, data
).success((c) =>
  alert '成功したよ'
).fail( ->
  alert '失敗したよ'
).always(
    bar
)

これまたシンプルでいいですね。

関連リンク

• CoffeeScript
• jQuery: The Write Less, Do More, JavaScript Library

Tweet

そこに3つのボタンがあるじゃろ？
どれでも好きなものを押していくといい。