「デフォルト xx をエクスポート」と「デフォルトとして {xx} をエクスポート」の違い-jsチュートリアル-php.cn

「デフォルト xx をエクスポート」と「デフォルトとして {xx} をエクスポート」の違い

WBOY

リリース： 2024-08-05 15:03:26

オリジナル

370 人が閲覧しました

The Differences Between

JavaScript モジュールの基礎

モジュールは、他のモジュールにインポートして使用できる自己完結型のコードです。これらは、開発者がコードを整理し、保守しやすく、理解しやすい状態に保つのに役立ちます。

モジュールを操作するには、インポートおよびエクスポートの構文を理解する必要があります。ここで簡単に要約します:

import: 名前付きエクスポートまたは他のモジュールからのデフォルトのエクスポートをインポートするために使用されます。
エクスポート: 値、関数、またはクラスをモジュールからエクスポートし、他のモジュールがインポートできるようにするために使用されます。

エクスポートには 2 つのタイプがあります:

名前付きエクスポート: モジュール内に複数の名前付きエクスポートを含めることができます。これらは、名前を使用して明示的にインポートされます。
デフォルトのエクスポート: 各モジュールはデフォルトのエクスポートを 1 つだけ持つことができます。名前を指定せずにインポートされます。

エクスポート { xxx をデフォルトとして } の動作

JavaScript では、インポートは値ではなくライブバインディング、つまり参照です。これは、別のモジュールから変数をインポートするとき、その変数の値のコピーではなく、その変数への参照をインポートすることを意味します。

次の例を考えてみましょう:

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export { value as default };

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // ?
}, 1000);

ログイン後にコピー

この場合、どのような値が出力されると思いますか?

答えは 1 ではなく 888 です。これは、export が参照をエクスポートするためです。

エクスポートデフォルトxxxの動作

デフォルトのエクスポート構文は、モジュールからデフォルト値をエクスポートするために使用されます。ただし、エクスポートのデフォルト値を使用すると、ライブ参照ではなく、現在の値がエクスポートされます。

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export default value;

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // 1
}, 1000);

ログイン後にコピー

この場合、math.js の value 変数が変更されても、app.js の value 変数は変更されません。これは、value がライブ参照ではなく、インポート時の現在の値を保持するためです。

参照データ型のエクスポート

ご覧のとおり、先ほどはプリミティブデータ型をエクスポートしましたが、参照データ型をエクスポートしたらどうなるでしょうか?

// math.js
const value = {
  current: 1,
};

setTimeout(() => {
  value.current = 888;
}, 500);

export default value;
// OR
// export { value as default };

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value.current);
}, 1000);

ログイン後にコピー

ご覧のとおり、参照データ型を扱う場合、export default xxx とexport { xxx asdefault } の間に違いはありません。 JavaScript では常に参照型であり、エクスポート時に深くコピーされないことがわかります。

ベストプラクティスと推奨事項

エクスポートデフォルト xxx とエクスポート { xxx as デフォルト } の両方を使用してデフォルト値をエクスポートできますが、特定のシナリオでは動作が異なります。適切な構文を選択するための推奨事項をいくつか示します:

文字列や数値などの値をエクスポートする場合、ライブバインディングが必要ない場合は、エクスポートデフォルト xxx を使用します。
ライブバインディングが必要な場合、特にエクスポートされた値が時間の経過とともに変化する可能性がある場合は、export { xxx as default } を使用します (推奨されません)。
参照データ型の場合は、常に参照をエクスポートするため、どちらの構文も使用できます。
関連する提案: コードの可読性と保守性を考慮して、デフォルトのエクスポートの代わりに名前付きエクスポートを使用することをお勧めします。その理由は次のとおりです。