JavaScriptモジュールのエクスポート・インポート入門（詳しい解説）

この記事は JavaScript モジュールのエクスポートとインポートについての概要 (詳細な説明) を提供します。必要な方は参考にしていただければ幸いです。

最近、Vue フレームワークで書かれたプログラムをいくつか調べてみましたが、私のフロントエンドの知識はまだ数年前のもので、一見すると、JavaScript プログラムにはさまざまなモジュールのインポートがあることがわかりました。 imports これは、from と import の 2 つのキーワードが逆の順序で使用されることを除いて、Python の構文と非常によく似ています。よく見るとimportモジュールはPythonとは大きく異なり、exportがあることが前提で、さらにデフォルトのexportと名前付きexportに分かれていて少し面倒です。そこで、今日の記事では、すべての輸出フォームとそれに対応する輸入用途をまとめます。

ES6 は言語標準のレベルでモジュール機能を実装し、CommonJS および AMD の仕様を完全に置き換えることができるユニバーサル モジュール ソリューションになります。

• 各モジュールは 1 回だけロードされ、各 JS は 1 回だけ実行されます。次回同じディレクトリに同じファイルをロードすると、そのファイルはメモリから直接読み取られます。

  #Every モジュール内で宣言された変数はすべてローカル変数であり、グローバル スコープを汚染しません。

• モジュール内の変数または関数は、export を通じてエクスポートできます。

• モジュールは他のモジュールをインポートできます

• 2. モジュール関数は主に、export と import の 2 つのコマンドで構成されます。エクスポート コマンドはモジュールの外部インターフェイスを指定するために使用され、インポート コマンドは他のモジュールによって提供される関数を入力するために使用されます。

3 モジュールは独立したファイルであり、すべての変数はファイル内にあります。外部からは入手できません。外部からモジュール内の変数を読み取れるようにするには、export キーワードを使用して変数を出力する必要があります。

var year = '2018';
var month = 'Febuary';
export {year, month};

export export module

export 構文ステートメントを使用してエクスポートします。関数、オブジェクト、ファイル (またはモジュール) の元の値を指定します。モジュールのエクスポート方法には、

名前付きエクスポート (名前エクスポート)

と

デフォルト エクスポート (定義エクスポート)

の 2 つがあります。各モジュールは複数の名前付きエクスポートを持つことができますが、各デフォルト エクスポートは 1 つのモジュールのみです。 名前付きエクスポートモジュールは、エクスポート プレフィックス キーワードを使用してエクスポート オブジェクトを宣言でき、エクスポート オブジェクトは複数にすることができます。これらのエクスポート オブジェクトは、名前付きエクスポートと呼ばれる名前によって区別されます。

export { func }; // 导出一个已定义的函数func
export const foo = Math.sqrt(100); // 导出一个常量

* および from キーワードを使用してモジュールの継承を実装できます:

export * from 'base_module';

モジュールをエクスポートするときに、モジュールを指定できます。エクスポートされたメンバー。エクスポートされたメンバーはクラスのパブリック メンバーとみなされますが、エクスポートされていないメンバーはクラスのプライベート メンバーとみなされます:

var name = 'Kevin的居酒屋';
var domain = 'http://coffee.toast.com';
 
export {name, domain}; // 相当于导出{name:name,domain:domain}

モジュールがエクスポートされるとき、as キーワードを使用してエクスポートされたメンバーの名前を変更できます。エクスポートは次のように記述できます:

export {name as siteName, domain}

構文エラーに注意してください:

export 1; 
var a = 100;
export a;

インターフェイスをエクスポートするときは、内部の変数と 1 対 1 対応する必要があります。モジュール。 1を直接エクスポートしても意味がないし、インポート時にそれに対応する変数を持つことも不可能

export a

一見本当のようですが、aの値が数値であり、分解が全く完了しません、したがって、

export {a}

の形式で記述する必要があります。が関数に割り当てられている場合でも、上記の例のように、すべてのインターフェイスをエクスポートするにはモジュールの最後にエクスポートを使用することが最善であるとほとんどのスタイルが示唆しているため、上記の形式を使用してエクスポートすることはお勧めできません。 デフォルト エクスポートデフォルト エクスポートは、定義済みエクスポートとも呼ばれます。名前付きエクスポートでは複数の値をエクスポートできますが、参照をインポートする場合は、対応する値の参照にも同じ名前を使用する必要があります。デフォルトのエクスポートでは単一の値のみがエクスポートされます。この出力は関数、クラス、またはその他のタイプの値にすることができ、モジュールをインポートするときに参照しやすくなります。

export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类

デフォルト エクスポートは、名前付きエクスポートの別の形式として理解でき、デフォルト名を使用した名前付きエクスポートと考えることができます。

次の 2 つのエクスポート メソッドは同等です:

const D = 123; 
export default D;
export { D as default };

名前を使用してモジュールをエクスポートする場合:

// "my-module.js" 模块
function cube(x) {
    return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

別のモジュール (js ファイル) では、次のように Quote を記述できます。 :

import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);

モジュールのデフォルトのエクスポートを使用する場合:

// "my-module.js"模块
export default function (x) {
return x * x * x;
}

別のモジュールでは、次のように引用できます。これは、名前エクスポートよりも使用が簡単です:

import cube from 'my-module';
console.log(cube(3)); // 27

import import module

import 構文ステートメントは、関数、オブジェクト、および指定されたファイル (またはモジュール) の元の値を、エクスポートされたモジュールおよびスクリプトからインポートするために使用されます。インポート モジュールのインポートは、エクスポート モジュールのエクスポート機能に対応します。モジュールのインポート方法には、名前付きインポート (名前インポート) とデフォルト インポート (定義インポート) の 2 つがあります。

注:

インポートはファイルの先頭に配置する必要があり、先頭に他の論理コードを置くことはできません。これは、 のインポート スタイルと一致しています。他のすべてのプログラミング言語。 名前付きインポート名前を指定して、インポートされたメンバーを現在のスコープに挿入できます。単一のメンバーまたは複数のメンバーをインポートできます。

中かっこ内の変数は、export 後の変数に対応することに注意してください。

import {myMember} from "my-module";
import {foo, bar} from "my-module";

通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：

import * as myModule from "my-module";

默认导入

在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导入这些默认值。直接导入默认值：

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成员导入和默认导入

default关键字

// my-module.js
export default function() {}
 
// 等效于：
function func() {};
export {func as default};

在import的时候，可以这样用：

import a from './my-module';
 
// 等效于，或者说就是下面这种写法的简写
import {default as a} from './my-module';

这个语法糖的好处就是import的时候，可以省去{}。

简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的{default as ...}语法，所以import $,{each,map} from 'jquery';import后面第一个$是{default as $}的替代写法。

以上がJavaScriptモジュールのエクスポート・インポート入門（詳しい解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。