Require.jsを使いつつunderscore.jsを拡張したい [ backbone.js ]

試した日: 2012-09-20
jquery: 1.7.2（※1）
underscore.js: 1.3.3（※2）
backbone.js: 0.9.2（※3）
require.js: 2.0.5（※4）

require.jsを使うことでbackbone.jsをよりモジュールらしく使えるわけですが、色々なモジュールで使う汎用ファンクションは、極力underscore.jsを拡張して管理することが良いようです。ということで、require.jsを絡めてunderscore.jsを拡張してみました。とてーーも簡単です。でもrequire.jsの基本的な概念や使い方を知らないと、とっつきにくく見えるかもしれません。

利用するモジュールは依存関係を定義するmain.jsとViewやModelで呼び出されるunderscoreのラッパークラスの2つです。

サンプルコード

main.js

https://gist.github.com/3754528.js

main.jsでは単に依存関係を定義しているだけ。オーバーライドしない場合は、ここで定義したunderscore.jsの変数である「underscore」を他モジュール（viewとか）で呼び出す。今回はオーバーライドするので、下に記すunderscore.jsというファイル（名前は何でもOK。myunderscoreとか何でも）を「libs/underscore」みたいにパス指定で呼び出す。ちょっと分かりづらいかな、書き方が。

呼び出しがunderscoreの場合 = http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min
呼び出しがlibs/underscoreの場合 = ルート/libs/underscore.js

というように、オーバーライドを呼ぶなら後者を使うようにする。

ちなみに、
・http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min
・libs/underscore-min
この2つがunderscoreに対して定義されているのは、「もしもCDN（前者）が落ちてたら後者のファイルを使ってね」という定義。CDNが落ちてても安心したいとき対策。

libs/underscore.js

http://gist.github.com/3754535.js?file=[backbone.js] underscore.js

上述したようにこの子を他モジュールでは呼び出してあげる。

ViewやModelなどの他モジュールでの記述サンプル。
define([“libs/jquery”, “libs/underscore”, “libs/backbone”],function($,_,Backbone){…

これで晴れて「_.addFigure(9999)」みたいな使い方ができる。libs/underscore.jsにどんどんユーティリティを追加していくだけで管理がとても簡単になる。ということでした。