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

Posted

技术标签:

【中文标题】ES6 模块:导出单个类的静态方法或多个单独的方法【英文标题】:ES6 modules: Export single class of static methods OR multiple individual methods 【发布时间】:2015-07-05 18:42:02 【问题描述】:

我正在使用 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' 语法是我的首选方法,因为它允许您使用点表示法(引用模块和方法)来帮助代码可读性。当我可能只使用其中一种方法时,这是否会对性能产生影响?

【问题讨论】:

使用import myMethod1, myMethod2 from 'myMethods';,导入的方法不必像变量那样被取消引用。虽然已经说过我不确定点表示法是否真的被视为变量。 另见Export an object containing function, or just export multiple functions in ES6 【参考方案1】:

只有静态方法的类感觉有点“代码味道”

确实如此。这里不需要class 结构!只需导出一个普通的“模块”对象:

//------ 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.… 看起来像动态属性访问

【讨论】:

如果为了实例化类的实例而导出一个类,我会使用一个类。一个普通的 ... 否则就足够了。 @user5321531:是的,但是只有静态方法的类不需要实例化:-) 能够导出默认 * (* 是一个包含所有命名导出的对象)会很好,但我想这违背了“不应该有不止一种方法可以做它”的哲学 @Rivenfall 你可以import yourself 喜欢import * as namespace from './myself';,然后export namespace as default 。但是我建议避免这种情况,只需让库的用户导入命名空间。 @StevenT.Cramer 好吧,你总是可以这样做import default as somethingcreative from 'foo'/import somethingcreative from 'foo',命名导出不会改变任何事情。约定当然是将“foo”模块导入为foo。如果您的开发人员不想遵守该约定,那是他们的问题(或者他们有充分的理由)。【参考方案2】:

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

@Bergi 是正确的,不需要具有静态字段的类,在第一种情况下只需要一个对象。但是,Axel Rauschmayer 不鼓励使用此选项:

请注意,默认导出对象通常是一种反模式(如果您想导出属性)。你会失去一些 ES6 模块的好处(tree-shaking 和 faster access to imports)。

Airbnb 的开发人员建议命名导出和显式通配符导入,请参阅此线程:https://github.com/airbnb/javascript/issues/710#issuecomment-297840604

【讨论】:

在许多情况下,可读性比摇树更重要 @MichaelFreidgeim 有很多方法可以提高可读性,而无需打破合理的约定。不破坏它们也可以节省大量的精神开销,除非你最喜欢的消遣是考虑摇树的成本效益。 :)

以上是关于ES6 模块:导出单个类的静态方法或多个单独的方法的主要内容,如果未能解决你的问题,请参考以下文章

ES6模块

在 ES6 模块中导出多个类

webpack 支持的模块方法

如何为单个模型保存多个单独的记录

EXCEL的多个工作表如何导出单个EXCEL工作表

简明 ES6 模块