JavaScript での import と require の違いを比較する

この記事では、Javascript (es2016) の import と require の詳細な使い方と違いを主に紹介します。興味がある場合は、さらに詳しく学ぶことができます。 import して require します。全員と共有します。詳細は次のとおりです。

名前が lib.js であると仮定して、単純な js ファイルを作成します。 内容は次のとおりであるとします。

export const sqrt = Math.sqrt;
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}

このように、lib で定義されたプロパティとメソッドは、他の場所から参照できます。 import と require の 2 つの参照メソッドがあります。

//方法一
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
//方法儿
import * as lib from 'lib';
square = lib.square;

デフォルトのエクスポート情報を設定することもできます。これには、lib.js でエクスポートのデフォルト {} を定義する必要があります。デフォルトの後にパラメータまたは配列を続けることができます。書き方は次のとおりです:

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

通常、最初の方法を使用するのが一般的です。次に、import を使用してこの配列またはパラメーターを取得します。ただし、インポートは静的インポートにのみ使用できます。つまり、インポートはファイルの先頭の最上位に書き込む必要があります。そして、require は動的読み込みを実現できます。

ロード方法ランタイムロードコンパイル時にロード

仕様	コマンド	機能
CommonJS/AMD	が必要	コミュニティソリューションサーバー/ブラウザのモジュール読み込みスキームを提供します。非言語的な標準。モジュールの依存関係と入出力変数は実行時にのみ決定でき、静的な最適化は実行できません。
ESMAScript6+	import	言語仕様レベルでモジュール関数をサポートします。コンパイル時の静的解析をサポートしているため、JS へのマクロの導入と型チェックが容易になります。動的バインディング。

りー

以上がJavaScript での import と require の違いを比較するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。