やりたい事:ライブラリ「jquery」を読み込んだ後で「tmpl」を読み込む(依存関係)
リファクタ前
今までは、requireでネストしてた。
問題:依存が深くなるにつれて、名前で依存関係を解消したいと思ってくる。
require_before.js
require([
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
],
function() {
require([
"http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"
,"../javascripts/libs/mylib.js"
],function(){
//loaded();
});
}
);
リファクタ後
requireJS pluginがそれに相当するらしい。
嬉しさ
- pathsで名前を付けられて、それで読み込み定義出来ること(define)
- shimによりその名前で依存関係を書ける事(shim)
- baseUrlを基底として、pathsのライブラリがロードされること。地味に便利
require_after.js
requirejs.config({
shim: {
'jquery.tmpl': ['jquery']
},
baseUrl : '../javascripts/libs',
paths : {
jquery : 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min'
,'jquery.tmpl' : 'http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js'
mylibs : 'mylib' // load "../javascripts/libs/mylib.js"
}
});
define([ 'jquery','jquery.tmpl'], function() {
alert($);
});