JavaScriptでエクスポートとはどういう意味ですか

JavaScript では、export は「エクスポート」を意味します。JavaScript のモジュール内のすべての宣言はローカルです。モジュールは、export キーワードを使用してエクスポートできます。このコマンドは、モジュールをエクスポートするためにモジュール内のどこにでも使用できます。その後、他のJS ファイルは、import コマンドを通じてモジュールをロードできます。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript におけるエクスポートの意味

デフォルトでは、JavaScript モジュール内のすべての宣言はローカルであり、外部からアクセスすることはできません。モジュール内で宣言されたコンテンツの一部を公開し、他のモジュールで使用できるようにする必要がある場合は、関数をエクスポートする必要があります。最も簡単な方法は、export キーワードを追加してモジュールをエクスポートすることです。

エクスポートできる内容には、var、let、const で変更されたクラス、関数、変数が含まれます。エクスポート コマンドは、モジュールの最上位にある限り、モジュール内のどこにでも使用できます。ブロックレベルのスコープにある場合は、インポート コマンドと同様にエラーが報告されます。

export コマンドを使用してモジュールの外部インターフェイスを定義した後、他の JS ファイルは import コマンドを通じてこのモジュールを読み込むことができます。

import コマンドにはリフティング効果があり、モジュール全体の先頭に昇格して最初に実行されます。インポートは静的に実行されるため、実行時にのみ結果が得られる構文構造である式や変数は使用できません。

1. デフォルトのインポートとエクスポートデフォルトのインポート/エクスポート

各モジュールにはデフォルトのエクスポートが 1 つだけあり、エクスポートの内容は関数、クラス、オブジェクトなどになります。 。この方法がエクスポート内容のメインとなるため、インポート方法が最も簡単です。

// there is no semi-colon here
export default function() {} 
export default class {}
//示例
class A extends Component{
   ...
}
export default A;
//对应的import示例。
import A from './requireTest'
//default export, 输入 lodash 模块
import _ from 'lodash';
//一条import语句中，同时输入默认方法和其他变量
import _, { each } from 'lodash';
//上述代码对应的export语句
export default function (obj) {
  // ···
}
export function each(obj, iterator, context) {
  // ···
}
export { each as forEach };

注: モジュールは 1 つのデフォルト オブジェクトのみをエクスポートできます。実際にエクスポートされるのは、名前変更用にデフォルトという名前の変数です。同等のステートメントは次のとおりです。したがって、インポート後に任意の変数名を使用でき、{} は必要ありません。

import any from './requireTest'
import {default as any } from './requireTest'

2. 名前付きインポートおよびエクスポート

エクスポート コマンドは外部インターフェイスを指定し、変数と 1 対 1 の対応を確立する必要があることに注意してください。モジュール内です。さらに、export ステートメントによって出力されるインターフェイスには、対応する値との動的なバインディング関係があります。つまり、このインターフェイスを通じて、モジュール内のリアルタイムの値を取得できます。

import コマンドは、他のモジュールからインポートされる変数名を指定する 1 対の中括弧を受け入れます。中括弧内の変数名は、インポートされたモジュール (profile.js) の外部インターフェイスの名前と同じである必要があります。入力変数の名前を変更する場合は、インポート コマンドで as キーワードを使用して入力変数の名前を変更します。

インポート後の「from」はモジュール ファイルの場所を指定します。相対パスまたは絶対パスを使用できます。.js パスは省略できます。パスのないモジュール名だけの場合は、JavaScript エンジンにモジュールの場所を伝えるための構成ファイルが必要です。

// profile.js
//第一种export
export var firstName = 'Michael';
export function f() {};
//第二种export，优先使用这种写法
var firstName = 'Michael';
export {firstName}；
function f() {}
export {f};
//main.js
import { firstName, f } from './profile';
import { firstName as surname } from './profile';

3. インポートとエクスポートの名前変更

export { myFunction }; // exports a function declared earlier
export const foo = Math.sqrt(2); // exports a constant

異なるモジュールのエクスポート コンテンツをインポートする場合、名前の一意性を維持する必要があります。これは、次の 2 つのカテゴリを含む名前を変更することで解決できます。

//导出的时候重命名
function v1() { ... }
function v2() { ... }
export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion  //可以用两个不同的名称导出相同的值
};
//导入的时候重命名
// 这两个模块都会导出以`flip`命名的东西。同时导入两者，需要将其中一个的名称改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

4. エクスポートとインポートの複合記述方法

モジュール内で、最初に入力し、次に同じモジュールを出力する場合、インポート文は次のように記述できます。エクスポートステートメント。

export { foo, bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

【関連する推奨事項: JavaScript 学習チュートリアル】

以上がJavaScriptでエクスポートとはどういう意味ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。