javascript は、order_javascript スキルで js メソッドをロードして実行します

この記事では、javascriptでjavascriptを順番に動的にロードして実行する方法と実装コードを主に説明します。javascriptに興味のある友人は参考にしてください。

非同期やブロッキングなどの注釈を付けていないスクリプトはどうでしょうか:

ブラウザはJavaScriptファイルを非同期でロードしますが、ブラウザはJavaScriptファイルを書き込み順序に従って上から下に実行して解析します。 quotefile

Defer 属性タグ

defer は HTML4.0 で定義されており、この属性を使用すると、ドキュメントが解析された後、スクリプトの実行を遅らせることができます。文書内での出現順序。

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

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

非同期属性注釈

async は HTML5 の新しい属性であり、最も先進的なものはこの属性をサポートしています。
この属性の機能は、スクリプトを非同期でロードできるようにすることです。つまり、ブラウザーが async 属性を持つスクリプトに遭遇すると、ブラウザーは CSS を非同期でロードします

JavaScript は js ファイルを動的にロードします

原理は非常に簡単で、スクリプト ノードを作成し、そのノードにスクリプト属性を割り当てます。次に、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 ファイルが何か 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 がロードされた後でのみロードおよび実行されます。

JavaScript ファイルに相互依存関係がない場合、このメソッドは使用しないでください

関連する推奨事項:

html、css および js ファイルの読み込みシーケンスと実行

jquery PopupDialog JSP ページを読み込むメソッドを使用します

js_javascript スキルを動的にロードするいくつかの方法

以上がjavascript は、order_javascript スキルで js メソッドをロードして実行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。