概要

おしごとでBackbone.jsを利用した開発を行い、ある程度慣れというものが出てきました。実感として感じたものがいくつかあったので、散発的に書いていこうと思います。

でもやっぱり基本的には公式リファレンスが最も参考になります http://backbonejs.org/

Backboneの基本構成

htmlの要素をいくつかの単位に分割し、一つ一つをコンポーネントとして扱うのに適したライブラリ。 View + Model(Collection)で、一つのコンポーネントとして扱う。

Modelはステートを保持し、変更・取得等があった際に独自のイベントを発火する、いわゆるObservableなオブジェクト。 CollectionはObservable Arrayといったところ。両方ともオマケとしてunderscore.jsのメソッドが自身に組み込まれている。

Viewは見た目の制御というより、MVCにおけるControllerの役割が大きい。ユーザーのどの操作に対し、どのメソッドを割り当てるかを決定する。見た目制御の都合上Fat Viewになりやすい。

基本として、Backboneが提供しているオブジェクトはすべてObservableかつUnderscore.jsのメソッドを搭載しただけのものとして考えると使いやすい。あとはRouterとかあるけどこれでSPAやろうとすると死ぬと思う。

上記ページのpush型Observerがイメージとして近い

ほぼすべてBackbone.Eventsというオブジェクトを継承している。

リファレンスを見る際はEventsが全てにあるということを考えながら見るといいかも。

メソッド	詳細
listenTo	対象のオブジェクトが発するイベントを監視し、イベントが発火されたらコールバックを呼び出すように仕込むメソッド
listenToOnce	listenToは監視が永続するが、listenToOnceは一度コールバックしたらイベント呼び出しが解除される
trigger	イベントを発火する
extend	第一引数にはインスタンスに持たせる値、第二引数にはprototypeに持たせる値や継承元を持たせて、JavaScriptでの継承を実現する

メソッド	詳細
initialize	コンストラクタ。newした際に行われるメソッド
id	Viewのidではなく、document idのこと。指定されたidのDOM要素があれば、その要素を自身の$el, elに格納する
events	htmlが書き込まれた際にイベントハンドラが仕込まれるオブジェクト。書き方が独特なので公式リファレンスを参照
render	thisを返せば何をやっても自由なメソッド。よくあるのはthis.$el.html(' hoge hoge hoge<\div>')のような直接htmlを書き込むタイプのもの
delegateEvents	イベントを対象に仕込む。引数となるイベントオブジェクトの書き方はeventsと同じ。特定のタイミングでイベントを仕込みたいときに使う
undelegateEvents	delegateEventsと対となるメソッド。イベントを解除する

メソッド	詳細
get	setした値を取得する。取得したい要素のkeyは文字列となる
set	Modelに値を登録する。直接設定する方法との違いは、setで設定するとイベントが発火するため、Observableにオブジェクトを利用したいときは必須
toJSON	Modelにsetした値を、JavaScriptのプレーンなオブジェクトとして出力する。underscore templateに値を渡すときなど、Backbone Modelを利用したくない時に使う。CollectionはArrayになる

シンプルな機能のみを提供してるらしいけど大ウソじゃないですかね……。

Observableなオブジェクトを作るというのにもだいぶ大がかりな設計になっているし、使いやすいっちゃ使いやすいけど、やっぱりヘビーな感じは否めない。

初出からかなり時間がたってフレームワークやライブラリが充実してきたというのもあるけど、それでもやっぱり使っていて重い感じがある。 Virtual DOMを実現するなら脅威の1kb Hyperappなんてのもありますし。

あ、でもCollection.findWhereだけはかなり便利でした。linq.js使えって言われたらそれまでだけど。