Question

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

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

的正确方法是什么

import utils from "./utils" `

utils.foo()

目前我正在这样做

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

    export {
      foo
    }

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

    utils.foo()

这样正确吗？我是否保持摇树功能？

感谢

Answer 1

如果您要导入/导出的对象仅包含某些功能（我假设由于Utils名称），您可以单独导出这些功能，如下所示：

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

像这样导入：

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

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

作为示例，以下对象应作为整体导出，因为对象的属性应保持封装。只导入和调用increment函数不会改变myObject，因为无法提供对象的上下文（因为它不是作为整体导入的）。

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

Answer 2

es6原生方式：

// file1.es6
export const myFunc = (param) => {
  doStuff(param)
}

export const otherFunc = ({ param = {} }) => {
  doSomething({ ...param })
}

// file2.es6
import { otherFunc } from './file1.es6'
import * as MyLib from './file1.es6'

MyLib.myfunc(0)
MyLib.otherFunc({ who: 'Repley' })
otherFunc({ var1: { a1: 1 } })

等等。

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

2 个答案: