Backbone.jsに入門してみる【Events編】

普段からBackbone.js使ってますが、実は細かい仕様はわかっていなかったり^^;
初心に返って基礎的なところを振り返ります。

Backbone.jsって何？

Backbone.jsはクライアントサイドのMVC フレームワークです。
と、よく説明されますが、サーバーサイドで慣れ親しんだMVCとは
勝手が違うので、新しい気持ちで入門するのが大事です。

特徴としては最初の１回だけ同期通信を行い、
２回目からは非同期通信を行うことで高速に表示できることがあります。
それとBackbone.jsが多用しているObserverパターンに則り
コードを書くことで疎結合で拡張性の高いコードが出来上がります。

Backbone.jsを支えるunderscore.jsとjQuery

Backbone.jsの本体コードが1000行ちょっとで出来上がっているのは
underscore.jsとjQueryを利用しているからです。
Underscore.js
underscore.jsはいろいろな便利メソッドを提供してくれるので
JSerなら一度目を通しておきましょう。
よく使うのは

_.extend()
_.each()

でしょうか。他にも痒いところに手が届くようなメソッドがあり、
必要に応じて使うのが良いです。

Backbone.jsの動かし方

index.htmlなんかのscriptタグに本体コードを読み込むのですが、
先述した通り、Backbone.jsはunderscore.jsとjqueryに依存しているので
これら2つのライブラリを読み込んだ後に読み込むよう書きます。

  <script src="path/to/underscore.js"></script>
  <script src="path/to/jquery.js"></script>
  <script src="path/to/backbone.js"></script>
  <script src="myapp.js"></script>

あとはmyapp.jsなどのファイルにBackbone.jsを利用した
コードを書いていきます。

Backbone.Events

Backbone.jsの基幹になっているObserverパターンを
提供しているのがBackbone.Eventsです。

こちらはBackbone.jsのIntroductionに載っているコードです。

var object = {};  // 1

_.extend(object, Backbone.Events);  // 2

object.on("alert", function(msg) {  // 3
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");  // 4

それぞれ説明していくと

空のオブジェクトを定義
空のオブジェクトにBackbone.EventsオブジェクトをMixin
objectが"alert"イベントを発火したらalertを出す関数をコールバックに設定
objectの"alert"イベントを発火（引数に"an event"を付与)

重要なのは３と４のイベントの購読の仕方と、発火の仕方です。
イベントを駆使して処理を繋げるのがポイントです。

Backbone.Model、Backbone.Collectionなどに入る前に、
もう少しEventsを使ってみます。

Mediatorパターン

後々便利に使えるパターンなので紹介しておきます。
Mediatorパターンは複数のオブジェクトの間を取り持つ仲介者を
用意するパターンです。

例えばタブ切り替えを実装するとします。
一方のタブをクリックしたら、一方のタブは非アクティブの処理を行いたいとします。

Mediatorを使うと２つのコンポーネント間のやりとりを簡潔に記述できます。

var mediator = _.extend({}, Backbone.Events);

mediator.listenTo(tab1, 'active', _.bind(tab2.deactive, tab2));
mediator.listenTo(tab2, 'active', _.bind(tab1.deactive, tab1));

tab1, tab2はそれぞれのタブを管理するオブジェクトだとして、
このコードはどちらかのtabからactiveイベントが発火すると
もう一方のtabのdeactiveメソッドを呼びます。

コンポーネント間の連携を止める場合は
mediator.stopListening();を呼ぶと止まります。

listenToとonメソッドの違い

listenToメソッドはBackbone0.9.9から追加されたメソッドです。
onメソッドと使い方はほぼ同じですが、
listenToメソッドを使うことが推奨されています。

Eventsの実装により、発行者（triggerする側)は
購読者（onする側）への参照を保持するため、
購読者を削除する場合はoffメソッドで購読を解除しないと
発行者側からの参照が消えないそうです。
GCの対象となるのはどのオブジェクトからも参照されていない
オブジェクトなので、offで適切に購読を解除しないと
一見削除したように見えてもGCの対象になっていない場合があります。

listenToメソッドを使って購読していれば、
stopListeningメソッドによって発行者からの参照を
自動的に削除してくれるので、メモリ管理を意識するのであれば
onよりもlistenToを使って行きましょう。

おわりに

Backbone.js界隈は最近盛り上がってきているので
勉強しといて損はないかと。
今回はEventsしか紹介できませんでした orz
来週はModelとCollection編の予定です。

yutaponのブログ

javascript界隈の興味あるネタを備忘録的に残しておく場所