ある JavaScript ファイルを別の JavaScript ファイルにインポートするにはどうすればよいですか?

CSS の @import と同様に、JavaScript ファイルを別の JavaScript ファイルに含めるにはどうすればよいですか?

JavaScript は、モジュールのインポートの必要性に対処するために長年にわたって進化してきました。 、さまざまな環境間での互換性とサポートを向上させるために、新しいアプローチが導入されました。

ES6 モジュール (ECMAscript)モジュール)

2015 年に導入された ES6 モジュールは、Node.js および最新のブラウザーにモジュールをインポートする標準化された方法を提供します。構文:

// Example: module.js
export function hello() {
  return "Hello";
}

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

Node.js require (CommonJS Modules)

Node.js で使用される従来のモジュール システムは、今でも多くのプロジェクトで広く使用されています。構文:

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

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

AJAX Loading

非同期リクエスト経由で外部スクリプトをロードし、eval を使用して実行します。セキュリティとサンドボックスの制限を明示的に処理する必要があります。

Fetch Loading

実行順序を制御する Promise を使用して、1 つまたは複数のスクリプトをフェッチでロードします。

jQuery Loading

単一行のスクリプト読み込み機能を提供します。

動的スクリプトの読み込み

スクリプト URL を使用して HTML にスクリプト タグを手動で追加します。

スクリプト実行の検出

リモートで読み込まれたスクリプトは非同期で実行され、コードが利用可能であることを確認する技術が必要です。必要な場合:

• イベント処理: スクリプト ロード イベントにコールバックをバインドします。
• ソース コードのマージ/前処理: Webpack、Parcel、Babel などのビルド ツールを使用して、コードを結合、縮小、トランスパイルします。 .

結論

インポート方法の選択は依存します特定の要件と環境について。古いブラウザとの互換性、パフォーマンス要件、コードの前処理の必要性などの要素を考慮してください。

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