JavaScript ファイルを他の JavaScript ファイルに含めるにはどうすればよいですか?

JavaScript ファイルを他の JavaScript ファイルに含める

JavaScript でのモジュールのインポートは、CSS の @import とは異なります。 JavaScript の初期バージョンには import、include、require 関数がなかったため、他のバージョンに JavaScript ファイルを含めるためのさまざまなアプローチが必要になりました。ただし、ES6 (2015) 以降、JavaScript は Node.js および最新のブラウザーにモジュールをインポートするための ES6 モジュール標準を導入しました。

ES6 モジュール

ES6 モジュールは使用します次の構文:

import { function } from './module.js';
// or
import * as module from './module.js';

ブラウザの ECMAScript モジュール

ブラウザは、Webpack などのビルド ツールを使用せずに、ES6 モジュールの直接読み込みをサポートします。次の構文を使用します:

<script type="module">
  import { function } from './module.js';
</script>

Node.js require

Node.js は CJS モジュール スタイルを使用します:

const module = require('./module.js');

その他の方法

以外ES6 モジュールと Node.js には必要ですが、ブラウザに JavaScript ファイルを含める他の方法には次のようなものがあります。

• AJAX 読み込み: AJAX 呼び出しを使用してスクリプトをロードし、評価して実行します。セキュリティのため、同じドメインに制限されます。
• Fetch Loading: スクリプトの実行順序を制御するには、Promise で fetch を使用します。
• jQuery Loading: jQuery を使用してスクリプトを一度にロードするline.
• 動的スクリプトの読み込み: URL を含むスクリプト タグを作成し、HTML に追加します。

スクリプトの実行の検出

JavaScript ファイルをリモートに含めるということは、非同期読み込みを意味します。ロードされたコードをすぐに使用できるようにするには、次の手法を使用します。

function loadScript(url, callback) {
  // Create script tag
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // Bind event to callback function
  script.onreadystatechange = callback;
  script.onload = callback;

  // Append to HTML
  document.head.appendChild(script);
}

ソース コードのマージ/前処理

Parcel、Webpack、Babel などのビルド ツールソース コードのマージ、下位互換性の提供、ファイルの縮小に使用できます。

以上がJavaScript ファイルを他の JavaScript ファイルに含めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。