![Require.jsを使いつつunderscore.jsを拡張したい [ backbone.js ]](https://soylatte.jp/wp-content/themes/soy-magazine/assets/images/no-thumbnail.png)
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が落ちてても安心したいとき対策。
・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){…
define([“libs/jquery”, “libs/underscore”, “libs/backbone”],function($,_,Backbone){…
これで晴れて「_.addFigure(9999)」みたいな使い方ができる。libs/underscore.jsにどんどんユーティリティを追加していくだけで管理がとても簡単になる。ということでした。