Sharable

システム&ウェブのシェアラブル

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

2012年9月20日
試した日
2012-09-20

jquery
1.7.2

underscore.js
1.3.3

backbone.js
0.9.2

require.js
2.0.5

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にどんどんユーティリティを追加していくだけで管理がとても簡単になる。ということでした。

このエントリーをはてなブックマークに追加