Question

我正在使用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'语法是我首选的方法，因为它允许您使用点符号（引用模块和方法）帮助代码可读性。当我可能只使用其中一种方法时，这会产生性能影响吗？

Answer 1

一类只是静态的方法感觉有点像代码味道＆＃39;

确实是的。你在这里不需要class结构！只需导出一个普通的＆＃34;模块＆＃34;对象：

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

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

我建议您使用多次导出的第二种方法。

单独导出所有内容确实感觉有点冗长

嗯，你不需要任何包装结构，所以我说它的样板很少。您只需要明确标记要导出的所有内容，这不是一件坏事。

* as语法是我首选的方法，因为它允许您使用点符号（引用模块和方法）来帮助代码可读性。

这是个人偏好，并且取决于您所编写的代码类型。有时简洁性更高，但明确引用模块的能力也很有用。请注意，使用* as和默认导入的对象的命名空间导入在这里非常相似，但只有命名导出允许您通过import {myMethod1, myMethod2}直接引用它们。因此，最好选择那些导入模块的人。

这是否有任何性能影响？

不多。目前的ES6实现还没有针对性能优化。

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

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

Answer 2

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

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

请注意，默认导出对象通常是反模式（如果要导出属性）。您会失去一些ES6模块的好处（tree-shaking和faster access to imports）。

Airbnb上的开发人员建议命名导出和显式Wildcrad导入，请参见以下主题：https://github.com/airbnb/javascript/issues/710#issuecomment-297840604

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

2 个答案: