javascript - ES6 模块 : Export single class of static methods OR multiple individual methods

标签 javascript class module ecmascript-6

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

最佳答案

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

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

//------ 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 更快,当然更小的文件需要更少的加载时间如果未使用的导出在捆绑过程中被删除。参见 here了解详情。几乎不会有明显的性能差异,您应该使用更易于维护的。

[1]:模块命名空间(import * as ns)也是静态的,即使 ns.… 看起来像动态属性访问

关于javascript - ES6 模块 : Export single class of static methods OR multiple individual methods,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29893591/

相关文章:

perl - 在 Perl 中为模块提供备用名称

javascript - 如何在 webpack 中应用 createProxyMiddleware?

c++ - 在构造函数初始化列表中使用结构 vector 初始化类结构

php - opencart 权限被拒绝

c++ - 在声明后使用方法扩展类功能

c# 我必须为新类实例指定名称吗?

Powershell 模块 GUID

javascript - Chrome 浏览器中的字体系列 "Arial black"解析问题

javascript - 访问动态创建的跨域 iFrame 内的元素?

javascript - 使用 setTimeout 调用一次 forEach 完成后的回调函数?