ホームページ > 記事 > ウェブフロントエンド > JavaScript ファイルの同期および非同期読み込みの実装コード

JavaScript ファイルの同期および非同期読み込みの実装コード

韦小宝オリジナル: 2018-01-19 10:32:211309ブラウズ

この記事では、主に JavaScript ファイルの同期および非同期読み込みの実装コードを紹介します。JavaScript に興味がある人は、この記事を参照してください。ただし、現時点では、JS ファイルへの参照が含まれています。良い仕事をしているフレームワークやツール (webpack、commonjs、

require

sjs など) はたくさんあります。ただし、これらのフレームワークとは別に、ネイティブの読み込み方法を理解することは依然として役に立ちます。この記事では、いくつかの js ファイルの同期および非同期読み込み方法について簡単に説明します。

同期読み込み
は、3f1c4e4b6b16bbbd69b2ee476dc4f83aタグを使用してHTMLファイルに挿入できます。これは、最初に学習する際の最も基本的な方法です。

以下の2つのjsファイルを用意します。

calc1.js

console.log(&#39;calc1 loading begin&#39;)

function add(...args) {
  return args.reduce((currentTotal, i) => currentTotal + i, 0);
}
console.log(&#39;calc1 loading end&#39;)

calc2.js

console.log(&#39;calc2 loading begin&#39;)

console.log(add(1,2,3))

console.log(&#39;calc2 loading end&#39;)

calc2.jsはcalc1.jsに依存しています。

HTML ファイルは次のとおりです:

<body>

  <script src="calc1.js">
  </script>
  
  <script src="calc2.js">
  </script>
</body>

このように、ファイルの読み込みは同期的に行われます。つまり、calc2.js は calc1.js がロードされた後にのみロードされるため、calc2.js が常に calc1 の add 関数を正しく呼び出せることが保証されます。 Chrome でのデバッグ結果は次のとおりです。

ただし、複数のファイルがある場合、合計の読み込み時間が非常に長くなり、ユーザーインターフェイスの応答がブロックされるという欠点もあります。

スクリプト要素による非同期読み込み
非同期読み込みの利点は、複数の js ファイルを同時に読み込むことができ、非同期であるため、ユーザーインターフェイスとユーザーエクスペリエンスをブロックしないことです。いいね。もちろん、依存ファイルのロード順序が保証できないという欠点があります。 Chrome の

html コード

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    var script1 = document.createElement(&#39;script&#39;);
    script1.src=&#39;calc1.js&#39;;
    script1.type=&#39;text/javascript&#39;;

    var script2 = document.createElement(&#39;script&#39;);
    script2.src=&#39;calc2.js&#39;;
    script2.type=&#39;text/javascript&#39;;

    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script1).appendChild(script2);
  </script>
</head>

のデバッグ結果は、次のように正しく出力される場合があります:

ただし、 clac1.js が最初にロードされていないため、calc2.js の実行時にエラーが報告される場合があります。。

次に、読み込み順序の問題を解決し、calc1.js が最初に読み込まれるようにする必要があります。

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function loadScript(file, callbackFn) {
      var script = document.createElement(&#39;script&#39;);
      script.src= file;
      script.type=&#39;text/javascript&#39;;
      // 监听onload时间，当前js文件加载完成后，再加载下一个
      script.onload = callbackFn;
      document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script)
    }
    
    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    } );

  </script>
</head>

こうすることで、常に正しい結果が出力されます。

AJAX

 <script>
    function loadScript(file, callbackFn) {
      var xhr = new XMLHttpRequest();
      xhr.open(&#39;get&#39;, file, true);
      // for IE
      if (xhr.onreadystatechange) {
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState, xhr.status);
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
              insertScriptText(xhr.responseText);
              if (callbackFn) {
                callbackFn();
              }
            }
          }
        }
      } else {
        xhr.onload = function () {
          insertScriptText(xhr.responseText);
          if (callbackFn) {
            callbackFn();
          }
        }
      }
      xhr.send(null);
    }

    function insertScriptText(scriptText) {
      var script = document.createElement(&#39;script&#39;);
      script.type = &#39;text/javascript&#39;;
      script.text = scriptText;
      document.body.appendChild(script);
    }

    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    });

  </script>

を介してJSファイルをロードすることでも、結果を正しく出力できます。

単一または少数の js ファイルの場合は、html 本文の最後に script タグを挿入して同期的に読み込むことができます。 Webpack は実際に複数の js ファイルを 1 つにマージし、本体にスクリプト参照を挿入します。

JavaScript ファイルの同期および非同期読み込みの実装コード

関連記事