ES6 模块：导出单个 class 静态方法或多个单独的方法

Question

我正在使用 ECMAScript6 模块。从以下选项中 export/import 从一个模块中获取多个方法的正确方法是什么？

单个 class 静态方法：

//------ 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) 导出： class 只是静态方法感觉有点像 'code smell' 但类似地单独导出所有内容确实感觉有点冗长。仅仅是开发人员偏好还是这里有性能影响？

2) 导入： '* as' 语法是我的首选方法，因为它允许您使用点符号（同时引用模块和方法）来帮助提高代码可读性。当我可能只使用其中一种方法时，这对性能有影响吗？

Answer 1

A class of just static methods feels like a bit of a 'code smell'

确实如此。这里不需要 class 结构！只需导出一个普通的 "module" 对象：

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

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

尽管如此，我确实推荐您使用多重导出的第二种方法。

exporting everything individually does feel a bit verbose

好吧，您不需要任何包装器结构，所以我认为它的样板更少。您只需明确标记要导出的所有内容，这不是一件坏事。

* as syntax is my preferred method as it allows you to use the dot notation (referencing both the module AND the method) aiding code readability.

这完全是个人喜好，并且取决于您编写的代码类型。有时简洁性更好，但显式引用模块的能力也很有帮助。请注意，使用 * as 的命名空间导入和默认导入的对象在这里非常相似，尽管只有命名导出允许您通过 import {myMethod1, myMethod2} 直接引用它们。所以最好把选择权留给那些导入你的模块的人。

Does this have any performance implications?

不多。目前的 ES6 实现还没有以性能优化为目标。

一般来说，静态标识符比属性访问 ^[1] 更容易解析和优化，多个命名导出和部分导入理论上可以使 JIT 更快，并且当然，如果在捆绑过程中删除未使用的导出，则较小的文件需要较少的加载时间。有关详细信息，请参阅。几乎不会有明显的性能差异，您应该使用更易于维护的。

_{[1]：模块名称空间 (import * as ns) 也是静态的，即使 ns.… 看起来像动态的属性访问}

Answer 2

TLDR；使用多个导出方法和显式导入。

@Bergi 关于不需要带有静态字段的 class 是正确的，在第一种情况下只需要一个对象。但是，Axel Rauschmayer 不鼓励使用此选项：

Note that default-exporting objects is usually an anti-pattern (if you want to export the properties). You lose some ES6 module benefits (tree-shaking and faster access to imports).

Airbnb 的开发人员推荐命名导出和显式 wildcrad 导入，请参阅此线程：https://github.com/airbnb/javascript/issues/710#issuecomment-297840604

ES6 模块：导出单个 class 静态方法或多个单独的方法

ES6 modules: Export single class of static methods OR multiple individual methods

javascript

module

class

ecmascript-6