web-dev-qa-db-ja.com

ES6の慣用表現モジュールパターン

以前は 明らかにするモジュールパターン を使用しました。

function myModule() {
  function foo() ...
  function bar() ...

  return { 
    foo: foo, 
    bar: bar
  };
}

ES6では、これはオブジェクトの省略表現で改善されました。

function myModule() {
  function foo() ...
  function bar() ...

  return { foo, bar };
}

現在、組み込みのモジュール構文を使用して、上記に最も類似した優先パターンを見つけるのに苦労しています。

オプション＃1エクスポート

// export file
function foo() ...
function bar() ...

export { foo, bar };

// import file
import { foo, bar } from './export-file';

foo();
bar();

オプション＃2破壊を伴うデフォルトのエクスポート/インポート

// export file
function foo() ...
function bar() ...

export default { foo, bar };

// import file
import baz from './export-file';

const { foo, bar } = baz;

foo();
bar();

オプション＃3デフォルトのエクスポート/インポート、名前間隔あり

// export file
function foo() ...
function bar() ...

export default { foo, bar };

//import file
import baz from './export-file';

baz.foo();
baz.bar();

「構造化」インポート構文で提供される単純さのために、オプション＃1と名前付きエクスポートが好きです。

import { foo, bar } from './export-file';

また、モジュールのエクスポートされたAPIを、エクスポートオブジェクトのエクスポートファイルの下部で明示的に定義し続けたいと思っています。

export { foo, bar };
// OR
export default { foo, bar };

私は常にデフォルトのエクスポートが優先されることを読んでいたので、デフォルトのエクスポートを含む優先パターンを見つけようとしてきましたが、あまりにも冗長で、利点が少ないため、採用することに消極的です（名前間隔、または場合によっては名前付きエクスポートとデフォルトエクスポートの両方を含める）。

ES6モジュール構文を使用した明らかにするモジュールパターンの慣用的なパターンはありますか？

javascriptes6-modules
18
sfletche

デフォルトのエクスポートが優先されることを常に読みます

いいえそうではありません。これらはよりシンプルで構文が短く、より頻繁に使用される可能性があります（より小さな、単一のエクスポートモジュールがあるため）が、一般的には推奨されません。

ジョブに適したツールを使用します。あなたはすでにあなたが望む利点を知っています。

ES6モジュール構文を使用した明らかにするモジュールパターンの慣用的なパターンはありますか？

はい、オプション＃1。エクスポートするものが複数ある場合は、常に名前付きエクスポートを使用してください。

厳格な構文から明示的なエイリアシングとツリーの揺れの両方を取得

import { foo, bar } from './export-file';

名前空間だけでなく

import * as baz from './export-file';
14
Bergi