web-dev-qa-db-ja.com

新しいクラスの作成とエクスポートconstの使用の違い

セットアップ：

  • BabelJS（es2015、react、stage-1）
  • Webpack
  • React/redux

CommonJSおよびES6の新機能。オブジェクトインスタンスとメソッドの静的コンテナの違いは知っていますが、モジュールに分離したときの動作がわかりません。したがって、インスタンスを返すことの違いは何ですか（このパターンはまったく有効ですか？）

// StateParser.js

class StateParser {
    constructor() {
     }

     method1() {
        ...
     }

}

export default new StateParser()

そしてconstメソッドのエクスポート：

// StateParser.js

let state = {
}

export const method1 = () => { ... }
  1. 方法A：インポートするたびに新しいインスタンスがありますか？

  2. 方法B：オブジェクトの構造化を使用できるという利点の1つです。

    import { method1 } from '../utils/StateParser.js';

    ローカルに存在するかのようにmethod1を使用しますか？

  3. 方法A：利点の1つは、コンストラクターで状態を初期化できることですか？

したがって、基本的に私はいつユーティリティクラスにどれを使用するかわかりません。

reactjsecmascript-6babeljscommonjs
13
Guy

Aをインポートするたびに新しいインスタンスがありますか？

いいえ、モジュールは一度だけ評価されます。

Bの利点の1つは、オブジェクトの構造化を使用し、method1をローカルに存在するかのように使用できることですか？

はい、「破壊」とは呼ばれていません。それらは名前付きインポートです（または名前付きエクスポートモジュールの）、そして、それらは入れ子にならず、エイリアスのために異なる構文を使用します。

Aの利点の1つは、コンストラクターで状態を初期化できることですか？

いいえ。モジュールのスコープで直接モジュールの状態を初期化することもできます。そのためのコンストラクター関数は必要ありません。

しかし、はい、インスタンスに状態がある場合は、複数回インスタンス化できるクラスを使用することをお勧めします。そのためには、もちろん、インスタンスではなくクラス自体をエクスポートする必要があります。

それは export default new …パターンはまったく有効ですか？

いいえ、上記の理由により、これはアンチパターンです。クラスが他で使用されていないことを考えると、それは 匿名クラス アンチパターンと非常に似ています。そして、複数の名前付きエクスポートをエクスポートする とにかく とにかくデフォルトのオブジェクトをエクスポートするよりも。

19
Bergi

お勧めしません 評価のエクスポート（例：new StateParser()）にはいくつかの理由があります。

この場合、モジュールは一度だけ評価される結果をエクスポートします（@Bergiでも言及されています）。これが望ましい結果になることはめったにありませんが、そうである場合は、代わりにシングルトンパターンを使用する必要があります。一部のES6モジュールの利点が失われます（ tree-shaking および インポートへの高速アクセス ）。これにより、インポートが遅くなり、呼び出し時に発生するはずの副作用を引き起こす可能性があります。 。また、これはアンチパターンであり、関数またはクラスをエクスポートすることで欠点を回避できると思います。

比較する方が理にかなっていますexport default StateParser constメソッドのエクスポート。

以下も参照してください。

0
thisismydesign