web-dev-qa-db-ja.com

ES6モジュール：静的メソッドの単一クラスをエクスポートOR複数の個別メソッド

ECMAScript6モジュールを使用しています。以下のオプションからモジュールから複数のメソッドをエクスポート/インポートする正しい方法は何ですか？

静的メソッドの単一クラス：

//------ myClass.js ------

export default class myClass {

  static myMethod1() {
    console.log('foo'); 
  }

  static myMethod2(args...) {
    console.log('bar'); 
  }  

}

//------ app.js ------

import myClass from 'myClass';
myClass.myMethod1();    //foo

複数のエクスポートされたメソッド：

//------ myMethods.js ------

export function myMethod1() {
    console.log('foo');
}

export function myMethod2() {
    console.log('bar');
}

//------ app.js ------
import {myMethod1, myMethod2} from 'myMethods';
myMethod1()    //foo;


//OR
import * as myMethods from 'myMethods';
myMethods.myMethod1()    //foo;

1）エクスポート：静的メソッドのクラスは少し「コード臭」のように感じますが、同様にすべてを個別にエクスポートすると少し冗長に感じます。単に開発者の好みですか、それともパフォーマンスに影響がありますか？

2）インポート： '* as'構文は、コードの読みやすさを支援するドット表記（モジュールとメソッドの両方を参照）を使用できるため、私の好みの方法です。ただし、これらの方法のうち1つしか使用していない場合でも、これはパフォーマンスに影響しますか？

javascriptclassmoduleecmascript-6
37
james

静的メソッドのクラスは、少し「コード臭」のように感じます

はい、そうです。ここでclass構造は必要ありません！通常の「モジュール」オブジェクトをエクスポートするだけです：

//------ myMethods.js ------

export default {
  myMethod1() {
    console.log('foo'); 
  },
  myMethod2(args...) {
    console.log('bar'); 
  }  
};

ただし、複数のエクスポートを使用する2番目のアプローチをお勧めします。

すべてを個別にエクスポートすると、少し冗長に感じます

まあ、あなたはラッパー構造を必要としないので、私はそれがより定型的ではないと言うでしょう。エクスポートしたいものすべてを明示的にタグ付けする必要がありますが、これは悪いことではありません。

* as構文は、コード表記を読みやすくするためにドット表記（モジュールとメソッドの両方を参照）を使用できるため、推奨される方法です。

それは非常に個人的な好みであり、あなたが書いているコードのタイプに依存します。簡潔さが優れている場合もありますが、モジュールを明示的に参照する機能も役立ちます。 * asとデフォルトでインポートされたオブジェクトを使用した名前空間のインポートは非​​常に似ていますが、import {myMethod1, myMethod2}を介して直接参照できるのは名前付きエクスポートのみです。したがって、モジュールをインポートするものに選択を任せてください。

これはパフォーマンスに影響しますか？

あまりない。とにかく、現在のES6実装はまだパフォーマンスの最適化を目指していません。

一般に、静的識別子はプロパティへのアクセスよりも簡単に解決および最適化できます[1]、複数の名前付きエクスポートと部分インポートにより、理論的にはJITが高速化されます。もちろん、未使用のエクスポートがバンドル中に削除された場合、小さなファイルのロード時間が短くなります。詳細については、 here を参照してください。顕著なパフォーマンスの違いはほとんどありません。より保守しやすいものを使用する必要があります。

[1]：import * as nsが動的なプロパティアクセスのように見えても、モジュールの名前空間（ns.…）も静的です

41
Bergi