Javascript ES6 模块:导出单类静态方法或多个单独的方法
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/29893591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ES6 modules: Export single class of static methods OR multiple individual methods
提问by james
I'm using ECMAScript6 modules. What is the correct way to export/import multiple methods from a module from the options below?
我正在使用 ECMAScript6 模块。从以下选项从模块导出/导入多个方法的正确方法是什么?
Single class of static methods:
单类静态方法:
//------ 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
Multiple exported methods:
多种导出方法:
//------ 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) Exporting: A class of just static methods feels like a bit of a 'code smell' but similarly exporting everything individually does feel a bit verbose. Is it simply developer preference or are there performance implications here?
1) 导出:一类只是静态方法感觉有点“代码味道”,但同样地,单独导出所有内容确实感觉有点冗长。是简单的开发人员偏好还是这里有性能影响?
2) Importing: '* 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. Does this have performance implications though when I may only be using 1 of the methods?
2) 导入:'* as' 语法是我的首选方法,因为它允许您使用点符号(同时引用模块和方法)帮助代码可读性。尽管当我可能只使用其中一种方法时,这是否会对性能产生影响?
回答by Bergi
A class of just static methods feels like a bit of a 'code smell'
一类只是静态方法感觉有点“代码味道”
Yes indeed. You don't need a classstructure here! Just export a normal "module" object:
确实是的。你class在这里不需要结构!只需导出一个普通的“模块”对象:
//------ myMethods.js ------
export default {
myMethod1() {
console.log('foo');
},
myMethod2(args...) {
console.log('bar');
}
};
I do recommend your second approach with multiple exports, though.
不过,我确实建议您使用多种导出的第二种方法。
exporting everything individually does feel a bit verbose
单独导出所有内容确实感觉有点冗长
Well, you don't need any wrapper structure, so I'd say it's less boilerplate. You just have to explicitly tag everything that you want to be exported, which is not a bad thing.
好吧,您不需要任何包装器结构,所以我会说它的样板文件更少。您只需要明确标记要导出的所有内容,这并不是一件坏事。
* assyntax is my preferred method as it allows you to use the dot notation (referencing both the module AND the method) aiding code readability.
* as语法是我的首选方法,因为它允许您使用点符号(同时引用模块和方法)来提高代码可读性。
That's very much personal preference, and does depend on the type of code you are writing. Sometimes conciseness is superior, but the ability to explicitly reference the module can be helpful as well. Notice that namespace imports using * asand default-imported objects are very similar here, though only named exports allow you to directly reference them via import {myMethod1, myMethod2}. So better leave the choice to those that import your module.
这在很大程度上取决于个人偏好,并且取决于您正在编写的代码类型。有时简洁性更好,但显式引用模块的能力也很有帮助。请注意,使用命名空间导入* as和默认导入对象在这里非常相似,尽管只有命名导出允许您通过import {myMethod1, myMethod2}. 所以最好把选择权留给那些导入你的模块的人。
Does this have any performance implications?
这对性能有任何影响吗?
Not much. Current ES6 implementations are not yet aiming for performance optimisations anyway.
不多。无论如何,当前的 ES6 实现还没有针对性能优化。
In general, static identifiers are easier to resolve and optimise than property accesses[1], multiple named exports and partial imports could theoretically make JIT faster, and of course smaller files need less time to load if unused exports are removed during bundling. See herefor details. There hardly will be noticeable performance differences, you should use what is better maintainable.
一般来说,静态标识符比属性访问更容易解析和优化[1],多个命名导出和部分导入理论上可以使 JIT 更快,当然,如果在捆绑期间删除未使用的导出,则较小的文件需要更少的时间来加载。有关详细信息,请参见此处。几乎不会有明显的性能差异,您应该使用更易于维护的。
[1]: module namespaces (import * as ns) are static as well, even if ns.…looks like a dynamic property access
[1]:模块命名空间 ( import * as ns) 也是静态的,即使ns.…看起来像动态属性访问
回答by thisismydesign
TLDR; Use multiple exported methods and explicit import.
TLDR;使用多种导出方法和显式导入。
@Bergi is right about not needing a class with static fields, only an object in your first case. However, this option is discouraged by Axel Rauschmayer:
@Bergi 关于不需要带有静态字段的类是正确的,在第一种情况下只需要一个对象。但是,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-shakingand faster access to imports).
Devs at Airbnb recommend named exports and explicit wildcrad import, see this thread: https://github.com/airbnb/javascript/issues/710#issuecomment-297840604
Airbnb 的开发人员推荐命名导出和显式通配符导入,请参阅此线程:https: //github.com/airbnb/javascript/issues/710#issuecomment-297840604

