ホームページ > 記事 > ウェブフロントエンド > JavaScript でのファイル同期と非同期読み込みメソッドの概要

JavaScript でのファイル同期と非同期読み込みメソッドの概要

黄舟オリジナル: 2017-08-20 09:49:101507ブラウズ

JS ファイルの参照に関しては、現在多くのフレームワークやツール (webpack、commonjs、requiresjs など) が存在しますが、それらは適切に機能しています。ただし、これらのフレームワークとは別に、ネイティブの読み込み方法を理解することは依然として役に立ちます。この記事では、いくつかの 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 を介して JS ファイルをロードする

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

以上がJavaScript でのファイル同期と非同期読み込みメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript でスネークウィジェットを実装するサンプルコード次の記事：JavaScript でスネークウィジェットを実装するサンプルコード

続きを見る