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

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

ある JavaScript ファイルを別の JavaScript ファイルに含めるのは、CSS で @import を使用するほど簡単ではありません。 。 ES6 より前は、この問題に対処するためにさまざまなアプローチが利用されていました。

ES6 モジュール

2015 年 (ES6) 以降、JavaScript は Node.js にモジュールをインポートするための ES6 モジュールを導入しました。最新のブラウザのほとんどもこの標準をサポートしています。 ES6 モジュールは次の構文を使用します。

export function hello() {
  return "Hello";
}

import { hello } from './module.js';
let val = hello(); // val is "Hello";

Node.js require

Node.js は、 module.exports/require system:

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

その他のブラウザ読み込み方法

ES6 モジュールに加えて、ブラウザは外部 JavaScript コンテンツを読み込むための他のさまざまなオプションも提供します:

• AJAX 読み込み: AJAX 呼び出しを使用して追加のスクリプトをロードし、eval を使用して実行します。
• フェッチ ロード: フェッチ コールを使用してスクリプトをロードし、実行順序を制御することを約束します。
• jQuery Loading: jQuery ライブラリを使用して、次の 1 行のスクリプトをロードします。 code.
• Dynamic Sc​​ript Loading: スクリプト URL を含む script タグを HTML に追加します。これにより、ブラウザでコードを評価できるようになります。

スクリプト実行の検出

コードをリモートでロードする場合、最新のブラウザはスクリプトを非同期で実行するため、コードが正しく実行されない可能性があります。ロード後すぐに利用可能。スクリプトが実行されたことを検出するには、

• イベント ハンドラー: スクリプト タグの onload または onreadystatechange イベントをコールバック関数にバインドします。
• ソース コードのマージ/前処理: Parcel などのビルド/トランスパイル ツールを使用します。 Webpack または Babel を使用して、ブラウザに読み込まれる前に JavaScript ファイルを結合して処理します。

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