es6模块中导出对象的正确方法

Question

我正在尝试将我的模块导出为对象，但导出它似乎是“反模式”（https://medium.com/@rauschma/note-that-default-exporting-objects-is-usually-an-anti -pattern-if-you-want-export-the-cf674423ac38 )

所以我想知道导出对象然后将其用作

import utils from "./utils" `

utils.foo()

目前我正在这样做

    /** a.js **/
    function foo(){
      //...
    }

    export {
      foo
    }

    /** b.js **/
    import * as utils from "a";

    utils.foo()

这样正确吗？我是否保留 tree-shaking 功能？

谢谢

Answer 1

如果您要导入/导出的对象仅包含一些函数（正如我根据名称假设的那样Utils），您可以单独导出这些函数，如下所示：

export function doStuff1() {}
export function doStuff2() {}

并像这样导入：

import {doStuff1, doStuff2} from "./myModule";

但是，如果要导出的对象除了方法之外还保存状态，则应该坚持使用简单的export default myObject. 否则，调用导入的方法将无法按预期工作，因为对象的上下文会丢失。

例如，以下对象应作为整体导出，因为该对象的属性应保持封装状态。仅导入和调用该increment函数不会发生变化myObject，因为无法提供对象的上下文（因为它不是作为一个整体导入的）。

const myObject = {
    counter: 0,
    increment: function() {
        this.counter++;
    }
}
export default myObject;