JavaScript で js メソッドを順次ロードして実行する方法を実装する方法

この記事では主に、JavaScript で js を動的にロードして実行する方法と、実装コードを必要とする友人が参照できるようにします。

まず、JS の動的ロードが理解できない場合は、以下を参照してください:

Javascript の動的ロードの実装方法

JS ファイルを動的にロードする 3 つの方法

非同期、ブロッキング、などの注釈:

ブラウザはJavaScriptファイルを非同期でロードしますが、参照先のファイルに書かれている順序で上から下にJavaScriptを解析します

Defer属性マーク

deferはで定義されていますhtml4.0. この属性により、ブラウザは、ドキュメントが解析された後、スクリプトが実行されると、ドキュメント内に出現する順序でダウンロードされ、解析されます。

つまり、defer 属性を持つスクリプトは、本体にスクリプトを配置するのと同じ読み込み効果があります。

しかし、各ブラウザでの defer 属性のサポートの程度はわずかに異なります。ブラウザーは完全にはサポートしていません。

非同期属性注釈

async は HTML5 の新しい属性で、最も先進的なものはこの属性をサポートしています。
この属性の機能は、スクリプトを非同期でロードできるようにすることです。 , ブラウザーが async 属性を持つスクリプトに遭遇すると、そのスクリプトが参照されます サーバーによって読み込まれた CSS も非同期で読み込まれます

JavaScript は js ファイルを動的に読み込みます

原理は非常に簡単で、スクリプト ノードを作成し、 script 属性をノードに追加し、dom の head タグに追加します。

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

複数の JavaScript ファイルを同時にロードする場合

loadJS('a.js');
loadJS('b.js');

上記の効果は、a.js ファイルと b.js ファイルが非同期かつ同時にロードされることです。 b.js ファイルが a.js ファイルより小さい場合、完全に b.js が最初にロードされて実行される可能性が高く、書き込まれた結果に従ってロードおよび実行されることはありません

したがって、b.js ファイルが最初にロードおよび実行される可能性があります。 js ファイルが a.js に依存している場合、b.js が解釈されて実行されるとき、a.js はまだロード中であるため、エラーが報告されます。

JavaScript のロード実行順序を制御します

コードに次の改善を加えました。

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);
    }

スクリプト ノードの onload 属性と onreadystatechange 属性を使用して、ノード src が正常にロードされたかどうかを監視します

成功した場合は、コールバック関数 success(); を呼び出します

このメソッドを呼び出しているため、loadJS コールバック関数を使用できます現在のノードがロードされたことを確認し、コールバック関数で他のスクリプト ファイルのロードを続けます

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

上記のメソッドによるロードは同期ブロッキングロードであり、ロードされるまで a.js はロードされません。 b.js ファイルがロードされて実行されます。

JavaScript ファイルに相互依存関係がない場合は、この方法を使用しないでください。

上記は、将来すべての人に役立つことを願っています。

関連記事:

JavaScriptで弾性効果を実現する方法

axiosでCookieクロスドメインを実装する方法

JavaScriptを使用してバイナリツリートラバーサルを実装する方法

以上がJavaScript で js メソッドを順次ロードして実行する方法を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。