RequireJSでこんなコードを書いてる。
page.html
<script>
require(["libA"], function(){
libA.foo();
});
</script>
libA.js
// libB, libC, libD,...など不特定多数多数のライブラリに依存する
require(["libB", "libC", "libD"], function(){
libA = {
foo: function(){
libB.something();
}
};
});
libB.js, libC.js, libD.js, libE.js…
libB = {
// blah blah blah...
};
だがこのコードはほとんどうまく動くことがない(たまに上手くいく)。なぜなら、libAのrequireコールバックが呼ばれたときにまだlibB以降は使えない可能性が高いからだ。
普通ならHTML内のrequireで全部のライブラリを列挙すれば安全にロードできるのだが、ここではlibB以降のライブラリは場合によって必要なものと数が変わるからHTML内では列挙できない。
そこで、libB以降のライブラリの読み込みを保証してからHTML側の処理に入りたい。
どういうやり方が賢いだろうか。
こんな風に書けたらいいな
page.html
<script>
require(["libA"], function(){
function(){
libA.foo();
}
});
libA.js
libA = {};
require(["libB", "libC", "libD"], function(){
libA = {
// blah blah blah...
};
loaded("libA");
});
要はファイルが読み込まれただけじゃなく、初期化が完了して使える状態にあることをローダーに対して伝えたいわけだな。ちょっと実装してみる。