出口對象ES6模塊

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 
const my_func = (param) => { 
    do_stuff(param) 
} 

const alien_func = ({ param = {} }) => { 
    do_something({...param}) 
} 


module.exports = { 
    my_func, 
    masked_alien: alien_func, 
    other_func: ({ var1, var2 = {} }) => { 
    return {...var1, ...var2} 
    }, 
} 

// file2.es6 
import { other_func } from './file1.es6' 
import * as FuncFile1 from './file1.es6' 

FuncFile1.myfunc(0) 
FuncFile1.masked_alien({ who: 'Repley' }) 
other_func({ var1: {a1: 1} }) 

等。