ども、 小堤です。
なんだかJSコード書いてるの、まだギリ楽しいので書いてます。
さて、題名の件です。いくつかぐぐると、JavaScriptのローダーが存在します。
でも、Ext JS使ってるなら、Ext JSっぽくかきたいじゃん。
ってことで作りました。
Ext.ux.ScriptLoaderです。
http://extjs.xenophy.info/ScriptLoader/
処理は、sample1～5.jsを次々読み込んで、それぞれの定義されたファンクションを呼ぶだけなんですが、ポイント！
- それぞれのJSコードが読み込まれたときのコールバックをExt JS風味にかける。
- 全部読み込み終わったときのイベントを設定できる。
で、App.jsをみてみると
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
Ext.onReady(<span style="color: #000099">function</span>(){ <span style="color: #000099">var</span> loader = <span style="color: #000099">new</span> Ext.ux.ScriptLoader({ listeners: { <span style="color: #009900">'load'</span> : <span style="color: #000099">function</span>() { alert(<span style="color: #009900">"すべての読み込みが完了しました。"</span>); sample1(); sample2(); sample3(); sample4(); sample5(); } }, items: [{ src: <span style="color: #009900">'./scripts/sample1.js'</span>, charset: <span style="color: #009900">'UTF-8'</span>, type: <span style="color: #009900">'text/javascript'</span>, callback: <span style="color: #000099">function</span>(id, loader) { alert(<span style="color: #009900">"sample1 loaded"</span>); }, scope: <span style="color: #000099">this</span> },{ src: <span style="color: #009900">'./scripts/sample2.js'</span>, charset: <span style="color: #009900">'UTF-8'</span>, type: <span style="color: #009900">'text/javascript'</span>, callback: <span style="color: #000099">function</span>(id, loader) { alert(<span style="color: #009900">"sample2 loaded"</span>); }, scope: <span style="color: #000099">this</span> },{ src: <span style="color: #009900">'./scripts/sample3.js'</span>, charset: <span style="color: #009900">'UTF-8'</span>, type: <span style="color: #009900">'text/javascript'</span>, callback: <span style="color: #000099">function</span>(id, loader) { alert(<span style="color: #009900">"sample3 loaded"</span>); }, scope: <span style="color: #000099">this</span> },{ src: <span style="color: #009900">'./scripts/sample4.js'</span>, charset: <span style="color: #009900">'UTF-8'</span>, type: <span style="color: #009900">'text/javascript'</span>, callback: <span style="color: #000099">function</span>(id, loader) { alert(<span style="color: #009900">"sample4 loaded"</span>); }, scope: <span style="color: #000099">this</span> },{ src: <span style="color: #009900">'./scripts/sample5.js'</span>, charset: <span style="color: #009900">'UTF-8'</span>, type: <span style="color: #009900">'text/javascript'</span>, callback: <span style="color: #000099">function</span>(id, loader) { alert(<span style="color: #009900">"sample5 loaded"</span>); }, scope: <span style="color: #000099">this</span> }] }); loader.load(); }); |
まぁ、見ての通りです(笑）
itemsに、読み込みたいJSの定義をオブジェクトリテラルで設定します。callbackとscopeでコールバックの設定をします。これが個々のJSコードが読み込まれたときに呼び出されるコールバック関数です。
で、ScriptLoaderは、全部読み込み終わったらloadイベントを発火しますんで、onかlistenersでイベントリスナー追加すればハンドリングできます。
また、読み込みを開始するのは、ScriptLoaderのloadメソッドです。
以上！
簡単だし、Ext JSテイストな書き方できるでしょ。
ちなみに、個々のイベントハンドラの引数は、スクリプトタグのID、そして、ローダー自身のオブジェクトが格納されてきまーす。
ソースコードは、これ＞http://extjs.xenophy.info/ScriptLoader/ScriptLoader.js
Ext.ux.ScriptLoader
便利そうなので、使わせて頂きます。
Pingback: 辟｡譁吶せ繝槭?繧｢繝励Μ繧ｲ繝ｼ繝