クライアント側のjavascript動的読み込み

覚書

javascriptで動的に読み込むjsにrequire.jsを利用しているのですが、更にそのrequire.jsをネイティブなコードで読み込んだ際に出た問題点

 

コード

<script>
(function() {
 var a = document.getElementsByTagName('script')[0];
 var b = function (src, main) {
     var e = document.createElement('script');
     e.src = src;
     e.setAttribute('data-main',main);
     a.parentNode.insertBefore(el, a);
 }

 b('/js/require.config.js');
 b('/js/require.js', 'main');
})();
</script>



<head>内に期待していたrequire.jsのロードが出来たがF5連打すると、require.config.js/require.jsの読み込み順番が異なり
まれにエラーが起きてしまう。
※同期処理が出来ていないorz

 

対処方法

<script>
(function() {
 var a = document.getElementsByTagName('script')[0];
 var b = function (src, main) {
     var e = document.createElement('script');
     e.src = src;
     e.setAttribute('data-main',main);
     a.parentNode.insertBefore(el, a);
 }

 b('/js/require.config.js');
 setTimeout(function(){
   b('/js/require.js', 'main');
 },10);
})();
</script>

厳密にはtimer処理つけてチェックしたほうがよさそう。。。