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

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 } を使用します (推奨されません)。

• 参照データ型の場合は、常に参照をエクスポートするため、どちらの構文も使用できます。

• 関連する提案: コードの可読性と保守性を考慮して、デフォルトのエクスポートの代わりに名前付きエクスポートを使用することをお勧めします。その理由は次のとおりです。

結論

JavaScript におけるエクスポート デフォルト xxx とエクスポート { xxx as デフォルト } の違いは微妙に見えるかもしれませんが、コードの動作に影響を与える可能性があります。この記事がお役に立てば幸いです。

私のコンテンツが役立つと思われる場合は、 購読をご検討ください。 Web 開発の最新情報を含むニュースレターを毎日送信します。ご支援ありがとうございます!

以上が「デフォルト xx をエクスポート」と「デフォルトとして {xx} をエクスポート」の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。