動的にjsを導入する際の順序について

1309 ワード

プロジェクトの中で一つの問題が発生したら、一つのページの中で一連のjsを動的にロードし、jsのロード順序を規定する必要があります.最初はjsを引用する方法は以下の通りです.
<script type="text/javascript">
var js = document.createElement("script");
js.src = '***.js';
js.type = "text/javascript";
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(js);
</script>
しかし、複数のjsを導入すると、それらのロード順序は必ずしも導入順ではなく、先に導入したjsが可能になるとロードされる.詳細な分析は参照できます.
http://www.w3help.org/zh-cn/causes/BX9013
解決方法は文書で説明したように、最後に以下の方法でjs順序を保証します.
function loadJS(url, success) {
  var domScript = document.createElement('script');
  domScript.src = url;
  success = success || function(){};
  domScript.onload = domScript.onreadystatechange = function() {
    if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
      success();
      this.onload = this.onreadystatechange = null;
      this.parentNode.removeChild(this);
    }
  }
  document.getElementsByTagName('head')[0].appendChild(domScript);
  //      ,      
}
//       JS   
loadJS('a.js',function (){
   loadJS('b.js',function (){
    loadJS('c.js',function (){
      alert('ok');
    });
   });
});