コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

es6 のモジュール性について詳しく説明した記事

青灯夜游
リリース： 2022-11-16 13:15:09
転載
1691 人が閲覧しました

es6 のモジュール性について詳しく説明した記事

CommonJs には多くの優れた機能があります。以下で簡単にレビューしてみましょう:

  • モジュール コードは、次の場合にのみロードされます。実行中;

  • #モジュールは 1 回だけロードできます;

    • #モジュールは他のモジュールのロードを要求できます;

  • #循環依存関係のサポート;

  • モジュールはパブリック インターフェイスを定義でき、他のモジュールはこのパブリック インターフェイスに基づいて監視および対話できます;

    • CommonJs CommonJs

Es Module
のユニークな点は、ブラウザを通じて、またはサードパーティのローダーやビルド ツールを使用してネイティブにロードできることです。負荷。

Es module

モジュールをサポートするブラウザは、トップレベル モジュールから依存関係グラフ全体をロードでき、それは非同期で行われます。ブラウザはエントリ モジュールを解析し、依存関係を特定し、依存モジュールに対するリクエストを送信します。これらのファイルがネットワーク経由で返された後、ブラウザーはその依存関係を解決します。これらの二次的な依存関係が読み込まれていない場合は、さらに多くのリクエストが送信されます。

この非同期再帰読み込みプロセスは、アプリケーション全体の依存関係グラフが解決されるまで続行されます。依存関係グラフが解析された後、参照プログラムはモジュールを正式にロードできます。

Es Module

は、

CommonJs と AMD の多くの優れた機能を借用するだけでなく、いくつかの新しい動作も追加します。 Es モジュール

デフォルトでは厳密モードで実行します。

  • ##Es モジュール グローバル名前空間を共有しません;

  • Es Module 最上位の

    this
    • の値は
  • unknown

    です (通常のスクリプトは window です) );var モジュール内の宣言は

    window
    • オブジェクトに追加されません;

  • Es Module は非同期でロードおよび実行されます。

  • エクスポートとインポート

モジュール関数 これは主に、exports

と
import
    という 2 つのコマンドで構成されます。

  • 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
    出力変数は元の名前ですが、
  • as
    • キーワードを使用して名前を変更できます。 
    const address = "广州";
const age = 18;

export { nickname as name, address as where, age as old };
    ログイン後にコピー
  • デフォルトのエクスポート。モジュールはデフォルトのエクスポートを 1 つだけ持つことができることに注意してください: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">export default &quot;foo&quot;; export default { name: &amp;#39;moment&amp;#39; } export default function foo(x,y) { return x+y } export { bar, foo as default };</pre><div class="contentsignin">ログイン後にコピー</div></div>
エクスポートの間違った使用法
#export ステートメントはモジュールの最上位にある必要があり、ブロック内にネストすることはできません: 

if(true){
export {...};
}
ログイン後にコピー
# #export 外部インターフェイスを提供する必要があります: 

    // 1只是一个值,不是一个接口
export 1

// moment只是一个值为1的变量
const moment = 1
export moment

// function和class的输出，也必须遵守这样的写法
function foo(x, y) {
    return x+y
}
export foo
    ログイン後にコピー
import の基本的な使用法
    • Usage
import

コマンドでモジュールの外部インターフェイスを定義した後、他の js ファイルは import コマンドを通じてモジュール全体をロードできます。 

import {foo,age,nickname} form &#39;模块标识符&#39;
ログイン後にコピー

    モジュール識別子現在のモジュールの相対パス、絶対パスまたは純粋な文字列も可能ですが、文字列などの動的計算の結果にすることはできません。
  • import コマンドは、他のモジュールからインポートされる変数名を指定する中括弧を受け入れます。変数名は、インポートされたモジュールの外部インターフェイスの名前と同じである必要があります。モジュール。
    • インポートされた変数は読み取り専用インターフェイスであるため、再割り当てできません。オブジェクトの場合は、オブジェクトのプロパティを再割り当てできます。エクスポートされたモジュールは値を変更でき、インポートされた変数もそれに応じて変更されます。
  • 上の図からわかるように、オブジェクトのプロパティは再割り当てされ、変数は
    • Assignment to constant を報告しています。変数
  • の型が間違っています。
モジュールが名前付きエクスポートとデフォルト エクスポートの両方をエクスポートする場合、それらは

importes6 のモジュール性について詳しく説明した記事 ステートメントで同時に取得できます。特定の識別子をリストして取得することも、

#
// 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";
ログイン後にコピー
  • dynamic import
    • のように
  • #
    import("./foo.js").then((module) => {
  const { default: foo, bar, baz } = module;
  console.log(foo); // [Function: foo]
  console.log(bar); // 777
  console.log(baz); // moment
});
    ログイン後にコピー
    を使用して取得することもできます。
標準的な使用方法

import インポートされたモジュールは静的であるため、ロード時にインポートされたすべてのモジュールがコンパイルされます (オンデマンドでのコンパイルは達成できないため、モジュールのロード速度が低下します)。ホームページ）。シナリオによっては、条件に基づいて、またはオンデマンドでモジュールをインポートする必要がある場合があります。この場合、静的インポートの代わりに動的インポートを使用できます。 キーワード import

関数を呼び出すのと同じように、モジュールを動的にインポートできます。このように呼び出すと、