前のレビュー

前回の記事では CommonJs について説明しました。まだ読んでいない場合は、この記事が掲載されている列を見つけることができます。学ぶために位置しています。
CommonJs には多くの優れた機能があります。以下で簡単に説明します:

モジュールコードはロード後にのみ実行されます。
モジュールは 1 回だけロードできます;
モジュールは他のモジュールのロードを要求できます;
サポートされています循環依存関係;
モジュールはパブリックインターフェイスを定義でき、他のモジュールはこのパブリックインターフェイスに基づいて観察および対話できます;

天下狠CommonJs 久矣

Es Module は、ブラウザを通じて、またはサードパーティのローダーやビルドツールを使用してネイティブにロードできるという点で独特です。
Es module モジュールをサポートするブラウザは、トップレベルモジュールから依存関係グラフ全体をロードでき、それは非同期で行われます。ブラウザはエントリモジュールを解析し、依存関係を特定し、依存モジュールに対するリクエストを送信します。これらのファイルがネットワーク経由で返された後、ブラウザーはその依存関係を解決します。これらの二次的な依存関係が読み込まれていない場合は、さらに多くのリクエストが送信されます。
この非同期再帰読み込みプロセスは、アプリケーション全体の依存関係グラフが解決されるまで続行されます。依存関係グラフが解析された後、参照プログラムはモジュールを正式にロードできます。
Es Module は、CommonJs と AMD の多くの優れた機能を借用するだけでなく、いくつかの新しい動作も追加します。

Es Module
はデフォルトで厳密モードで実行されます;
Es Module
はグローバルを共有しません名前空間;
Es Module
最上位の this の値は 未定義 (通常のスクリプトは window );
var
宣言は window オブジェクトに追加されません;
は非同期でロードおよび実行されます;
エクスポートとインポート

モジュール関数は主に次のように構成されます

exports

import の 2 つのコマンドのうちの 1 つです。 export
import コマンドは他のモジュールによって提供される関数をインポートするために使用されます。 エクスポートの基本的な使い方

エクスポートの基本形式:

export const nickname = "moment";
export const address = "广州";
export const age = 18;

ログイン後にコピー

もちろん、次の形式:

const nickname = "moment";
const address = "广州";
const age = 18;

export { nickname, address, age };

ログイン後にコピー

オブジェクトと関数を外部にエクスポートします

export function foo(x, y) {
  return x + y;
}

export const obj = {
  nickname: "moment",
  address: "广州",
  age: 18,
};

// 也可以写成这样的方式
function foo(x, y) {
  return x + y;
}

const obj = {
  nickname: "moment",
  address: "广州",
  age: 18,
};

export { foo, obj };

ログイン後にコピー

通常、export## で出力される変数は、 # は元の名前ですが、

キーワードを使用して名前を変更できます。
```
const address = "广州";
const age = 18;

export { nickname as name, address as where, age as old };
```
ログイン後にコピー
デフォルトのエクスポート。モジュールが持つことができるデフォルトのエクスポートは 1 つだけであることに注意してください:

export default "foo";

export default { name: 'moment' }

export default function foo(x,y) {
  return x+y
}

export { bar, foo as default };

ログイン後にコピー

export ステートメントはモジュールの最上位にある必要があり、ブロック内にネストすることはできません:

if(true){
export {...};
}

ログイン後にコピー

export

外部インターフェイスを提供する必要があります:

// 1只是一个值,不是一个接口export 1// moment只是一个值为1的变量const moment = 1export moment// function和class的输出，也必须遵守这样的写法function foo(x, y) {    return x+y
}export foo复制代码

ログイン後にコピー

import の基本的な使用法

export

コマンドを使用してモジュールの外部インターフェイスを定義した後、他の js ファイルを

コマンドモジュール全体
```
import {foo,age,nickname} from '模块标识符'
```
ログイン後にコピー
モジュール識別子は、現在のモジュールへの相対パス、絶対パス、または純粋な文字列にすることができますが、そうではありません。文字列などによる動的計算の結果。

コマンドは、他のモジュールからインポートされる変数名を指定する中括弧を受け入れます。変数名は、インポートされたモジュールの外部インターフェイスの名前と同じである必要があります。モジュール。
インポートされた変数は読み取り専用インターフェイスであるため、再割り当てできません。オブジェクトの場合は、オブジェクトのプロパティを再割り当てできます。エクスポートされたモジュールは値を変更でき、インポートされた変数もそれに応じて変更されます。
- 从上图可以看得出来,对象的属性被重新赋值了,而变量的则报了 Assignment to constant variable 的类型错误。
- 如果模块同时导出了命名导出和默认导出,则可以在 import 语句中同时取得它们。可以依次列出特定的标识符来取得,也可以使用 * 来取得:

// foo.js
export default function foo(x, y) {
  return x + y;
}

export const bar = 777;

export const baz = "moment";

// main.js
import { default as foo, bar, baz } from "./foo.js";

import foo, { bar, baz } from "./foo.js";

import foo, * as FOO from "./foo.js";

ログイン後にコピー

动态 import

标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。
关键字 import 可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise。

import("./foo.js").then((module) => {  const { default: foo, bar, baz } = module;  console.log(foo); // [Function: foo]
  console.log(bar); // 777
  console.log(baz); // moment});复制代码

ログイン後にコピー

使用顶层 await

在经典脚本中使用 await 必须在带有 async 的异步函数中使用,否则会报错:

import("./foo.js").then((module) => {
  const { default: foo, bar, baz } = module;
  console.log(foo); // [Function: foo]
  console.log(bar); // 777
  console.log(baz); // moment
});

ログイン後にコピー

而在模块中,你可以直接使用 Top-level await:

const p = new Promise((resolve, reject) => {  resolve(777);
});const result = await p;console.log(result); 
// 777正常输出

ログイン後にコピー

import 的错误使用

由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 错误
import { 'b' + 'ar' } from './foo.js';

// 错误
let module = './foo.js';
import { bar } from module;

// 错误
if (x === 1) {
  import { bar } from './foo.js';
} else {
  import { foo } from './foo.js';
}

ログイン後にコピー

在浏览器中使用 Es Module

在浏览器上,你可以通过将 type 属性设置为 module 用来告知浏览器将 script 标签视为模块。

<script></script><script></script>

ログイン後にコピー

模块默认情况下是延迟的,因此你还可以使用 defer 的方式延迟你的 nomodule 脚本:

  <script>      
  console.log("模块情况下的");
    </script>    
    <script></script>
    <script>
      console.log("正常 script标签");    
      </script>

ログイン後にコピー

es6 のモジュール化を 1 つの記事で完全に理解する

在浏览器中,引入相同的 nomodule 脚本会被执行多次,而模块只会被执行一次:

    <script></script>    <script></script>

    <script></script>
    <script></script>
    <script></script>

ログイン後にコピー

es6 のモジュール化を 1 つの記事で完全に理解する

模块的默认延迟

默认情况下,nomodule 脚本会阻塞 HTML 解析。你可以通过添加 defer 属性来解决此问题,该属性是等到 HTML 解析完成之后才执行。

es6 のモジュール化を 1 つの記事で完全に理解する

defer と async はオプションの属性です。nomodule スクリプト defer# # では、どちらか 1 つだけを選択できます。 #HTML が解析されるまで現在のスクリプトは解析されません。また、async は HTML と並行して解析され、 の解析をブロックしません。 HTML では、モジュールスクリプトで async 属性を指定できますが、モジュールはデフォルトで遅延するため、 defer では無効です。
async 属性が存在する場合、モジュールスクリプトとそのすべての依存関係が並行して解析およびフェッチされ、モジュールスクリプトはすぐに実行されます。利用可能。

Es モジュールと Commonjs の違い

Es モジュール モジュールについて説明する前に、まず Es モジュール## について理解する必要があります。 # と Commonjs はまったく異なり、次の 3 つのまったく異なるタイプがあります。

モジュールは値 ## のコピーを出力します。 #Es Module 出力は値への参照です。CommonJS
Es Module はコンパイル時の出力インターフェイスです。。 CommonJS
require() はモジュールを同期的にロードし、ES6 モジュールの import コマンドはモジュールをロードします。非同期的に実行され、独立したモジュール依存関係分析ステージがあります。

CommonJS

module.exports プロパティ) をロードするためです。このオブジェクトは、スクリプトが実行中です。完了後に生成されます。 Es Module はオブジェクトではなく、その外部インターフェイスは単なる静的な定義であり、コードの静的解析フェーズ中に生成されます。 Commonjs
Es Module
CommonJS とは異なります。 JS エンジン スクリプトを静的に分析する場合、モジュール読み込みコマンド import が検出されると、読み取り専用の参照が生成されます。スクリプトが実際に実行されると、この読み取り専用参照に基づいて、ロードされたモジュールから値が取得されます。つまり、import は接続パイプであり、元の値が変更されると、import で読み込まれる値もそれに応じて変更されます。したがって、Es Module は動的参照であり、値をキャッシュしません。モジュール内の変数は、それらが配置されているモジュールにバインドされます。 Es モジュールの動作原理の関連概念

動作原理を学ぶ前に、関連する概念を理解しておくとよいでしょう。

モジュールレコード

モジュールレコード (

モジュールレコード

Realm

Environment
HostDefined
ホスト環境 による使用のために予約されており、モジュールに関連付けるには追加情報が必要です。
モジュール環境レコードモジュール環境レコードは、ECMAScript モジュールの外部スコープを表すために使用される宣言型環境レコードです。通常の可変および不変バインディングに加えて、モジュール環境レコードは、別の環境レコードの間接アクセスに存在するターゲットへのバインディングを提供する不変 import

Es モジュールの解析プロセス

始める前に、プロセス全体がどのようなものであるかを大まかに把握して、一般的な理解を深めましょう:

フェーズ 1: 構築 (Construction)、アドレスに従って js ファイルを見つけ、ネットワーク経由でダウンロードし、モジュールファイルを に解析します。モジュールレコード ;
フェーズ 2: インスタンス化 (Instantiation)、モジュールをインスタンス化し、メモリ領域を割り当て、モジュールのインポートおよびエクスポートステートメントを解析し、モジュールを対応するメモリアドレス;
フェーズ 3: 実行 (評価)、コードを実行し、値を計算し、その値をメモリアドレスに入力します;

建設建設フェーズ

loader は、モジュールのアドレス指定とダウンロードを担当します。まずエントリファイルを変更します。これは通常、HTML ではモジュールファイルを表す <script type="module"></script> タグです。

es6 のモジュール化を 1 つの記事で完全に理解する

モジュールは、import ステートメントを通じて宣言され続けます。import にはモジュール宣言識別子があります。 宣言ステートメント。文字 (ModuleSpecifier)。loader に次のモジュールのアドレスを見つける方法を指示します。

es6 のモジュール化を 1 つの記事で完全に理解する

各モジュール識別番号は、 モジュールレコード (モジュールレコード)、および各 モジュールレコード# #に対応します。 #JavaScript コード、実行コンテキスト、ImportEntries、LocalExportEntries、IndirectExportEntries、StarExportEntries ##が含まれます＃。 ImportEntries 値は ImportEntry Records タイプであり、LocalExportEntries、IndirectExportEntries、StarExportEntries は です。 ExportEntry Records タイプ。

には 3 つのフィールド ModuleRequest、ImportName、# # が含まれています#LocalName;

ModuleSpecifier

ImportName: ModuleRequest
namespace-object は、インポート要求がターゲットモジュールの名前空間オブジェクトに対するものであることを示します。LocalName: インポートされたモジュールから現在のモジュールのインポート値にアクセスするために使用される変数。
詳細については、以下の図を参照してください。

次の表には、を使用してインポートされた
フィールドが記録されています。 import 例:

Import ステートメント Fromモジュール識別子(ModuleRequest)インポート名(ImportName) LocalName##「react」から React をインポート;#「react」「default」"React"import * as Moment from "react";"react"namespace -obj"モーメント""反応" から {useEffect} をインポート;"反応""useEffect" "useEffect""useEffect"

##import {useEffect をエフェクトとして } from "react"; "react"

"効果"＃＃＃＃＃＃＃＃＃＃＃＃

ExportEntry Records

A ExportEntry Records には、4 つのフィールド ExportName、ModuleRequest、ImportName が含まれます。 LocalName と ImportEntry Records は、追加の ExportName があるという点で異なります。

ExportName: このモジュールがエクスポート時にバインドするために使用する名前。

#次の表には、

export:# を使用してエクスポートされた

ExportEntry Records フィールドの例が記録されています。 ##エクスポート宣言#エクスポート変数 v;"v"nullnull"v"デフォルト関数 f() をエクスポート {}"default"nullnull"f"export デフォルト関数 () {}"default"nullnull""デフォルト 42 をエクスポート;"デフォルト"nullnull"""x"#export {v as x};"x"#null##「mod」から {x} をエクスポート;"x""mod""x "null「mod」から {v を x} にエクスポートします;"x""mod""v"nullデフォルト以外のすべて#nullnull

エクスポート名	モジュール識別子	インポート名	ローカル名


			default
			default	##エクスポート {x};
null	null	"x"
null	"v"

		##エクスポート * "mod" から;	null	"mod"
	##export * as ns from "mod";	"ns	"mod"	all
	トピックに戻る現在の `モジュールレコード` を解析した後でのみ、現在のモジュールがどのサブモジュールに依存しているかを知ることができます。サブモジュールを `解決`し、サブモジュールを取得し、次にサブモジュールを解析し、このプロセスの解決 -> フェッチ -> 解析を継続的に繰り返す必要があります。結果は次の図に示すようになります: このプロセスは、`静的分析`とも呼ばれます。JavaScript コードは実行されず、`export## のみが識別されます。 # および` import `キーワードがあるため、動的インポートを除き、`import `は非グローバルスコープでは使用できません。` 複数のファイルが 1 つのファイルに同時に依存している場合はどうなりますか?これにより無限ループが発生しますか?答えはノーです。 loader Module Map `を使用してグローバル` MOdule Record `を追跡およびキャッシュし、モジュールが` fetch## のみであることを確認します #一旦、各グローバルスコープに独立したモジュールマップが存在します。 MOdule Map は、URL レコードと文字列で構成されるキー/値マッピングオブジェクトです。 URL レコードは、モジュールを取得するためのリクエスト URL、モジュールのタイプを示す文字列 (例: "javascript") です。モジュールマップの値は、モジュールスクリプト、null (フェッチの失敗を示すために使用)、またはプレースホルダー値「fetching」のいずれかです。 linking リンクフェーズすべての Module Record が解析された後、次の JS エンジンは Link all を必要とします。モジュール。 JS エンジンは、エントリファイルの `モジュールレコード` を開始点として使用し、モジュールを深さ優先順に再帰的にリンクし、各 `モジュールに対して` モジュール環境レコード `を作成します。 Record`。`Module Record` 内の変数を管理するために使用されます。モジュール環境レコードには、 Module 変数を保存するために使用される `Binding` があります。上の図に示すように、Record `によってエクスポートされ、`モジュール環境レコード `のモジュール` main.js `にある` count `の変数をエクスポートします。 ##Binding` には `count` が含まれます。この時点では、モジュールインスタンスオブジェクトを作成し、対応する属性とメソッドを追加する `V8` のコンパイルフェーズに相当します。このときの値は `unknown` または `null` なので、メモリ領域を割り当てます。 `import` キーワードは、サブモジュール count.js で `main.js` と `count をインポートするために使用されます。 js` の #import `と` main.js `の` export `変数は同じメモリの場所を指しているため、親モジュールと子モジュール間の関係がリンクされています。。以下に示すように:` 需要注意的是,我们称 `export` 导出的为父模块,`import` 引入的为子模块,父模块可以对变量进行修改,具有读写权限,而子模块只有读权限。 Evaluation 求值阶段在模块彼此链接完之后,执行对应模块文件中顶层作用域的代码，确定链接阶段中定义变量的值，放入内存中。 Es module 是如何解决循环引用的在 `Es Module` 中有5种状态，分别为 `unlinked`、`linking`、`linked`、`evaluating`和 `evaluated`，用循环模块记录(`Cyclic Module Records`)的 `Status` 字段来表示,正是通过这个字段来判断模块是否被执行过,每个模块只执行一次。这也是为什么会使用 `Module Map` 来进行全局缓存 `Module Record` 的原因了,如果一个模块的状态为 `evaluated`,那么下次执行则会自动跳过,从而包装一个模块只会执行一次。 `Es Module` 采用 `深度优先` 的方法对模块图进行遍历,每个模块只执行一次,这也就避免了死循环的情况了。深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深地搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止。看下面的例子,所有的模块只会运行一次: // main.js import { bar } from "./bar.js"; export const main = "main"; console.log("main"); // foo.js import { main } from "./main.js"; export const foo = "foo"; console.log("foo"); // bar.js import { foo } from "./foo.js"; export const bar = "bar"; console.log("bar"); ログイン後にコピー通过 `node` 运行 `main.js` ,得出以下结果: 好了,这篇文章到这也就结束了。《JavaScript视频教程》

以上がes6 のモジュール化を 1 つの記事で完全に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。