Question

我的工厂功能如下：

import moduleA from'./modulea'
import moduleB from'./moduleb'
import { componentA, componentB } from './components'

module.exports = () => {
    //DECLARE VARIABLES SHARED BY FUNCTIONS
    const util = moduleA.util() //RETURNS OBJECT

    return Object.assign({}, {
        componentA,
        componentB
    }
}

最初，componentA和componentB是工厂函数中的函数，并且声明的变量部分中的任何导入的模块或变量在每个组件中都可用。

import moduleA from'./modulea'
import moduleB from'./moduleb'

module.exports = () => {
    //DECLARE VARIABLES SHARED BY FUNCTIONS
    const util = moduleA.util() //RETURNS OBJECT

    const componentA = () => {
        //MODULES AVAILABLE
        //DECLARED VARIABLES AVAILABLE
        //DO STUFF
    }

    const componentA = () => {
        //MODULES AVAILABLE
        //DECLARED VARIABLES AVAILABLE
        //DO STUFF
    }

    return Object.assign({}, {
        componentA,
        componentB
    }
}

由于将函数移动到'./components'，作为每个函数的单个文件，导入的模块和声明的变量现在不再可用于组件，即使使用Object.assign也是如此。我试过将它们传递给Object.assign无济于事。

有没有办法让我导入的组件可以使用导入的模块和声明的变量，以便我可以将工厂拆分为单独文件中的较小组件，而无需在每个组件文件中导入它们？我试图通过关闭来做到这一点。

Answer 1

您的组件模块还应导入所需的任何模块。

// "components" module

// Just like any other module, import what you need
import moduleA from'./modulea'
import moduleB from'./moduleb'

const util = moduleA.util()

export const componentA = () => {
    //MODULES AVAILABLE
    //DECLARED VARIABLES AVAILABLE
    //DO STUFF
}

export const componentA = () => {
    //MODULES AVAILABLE
    //DECLARED VARIABLES AVAILABLE
    //DO STUFF
}

编辑（回应评论）：

我不一定会推荐其他任何一种选择，但这里还有其他一些你可以做的事情：

1）将所有内容附加到“此”。

// "components" module

// Component functions are non-arrow functions so you can use "this"
export function componentA() {
    this.moduleA
    this.moduleB
    this.util
}

export function componentA() {
    this.moduleA
    this.moduleB
    this.util
}

然后在你的主要模块中：

module.exports = () => {
    //DECLARE VARIABLES SHARED BY FUNCTIONS
    const util = moduleA.util() //RETURNS OBJECT

    return Object.assign({}, {
        componentA,
        componentB,

        // other properties the component functions expect to have
        moduleA,
        moduleB,
        util
    }
}

或者2）将所有内容作为参数传递：

// "components" module

export const componentA = (moduleA, moduleB, util) => {
    //MODULES AVAILABLE
    //DECLARED VARIABLES AVAILABLE
    //DO STUFF
}

export const componentA = (moduleA, moduleB, util) => {
    //MODULES AVAILABLE
    //DECLARED VARIABLES AVAILABLE
    //DO STUFF
}

然后在你的主要模块中：

module.exports = () => {
    //DECLARE VARIABLES SHARED BY FUNCTIONS
    const util = moduleA.util() //RETURNS OBJECT

    return Object.assign({}, {
        componentA: (...args) => componentA(moduleA, moduleB, util, ...args),
        componentB: (...args) => componentB(moduleA, moduleB, util, ...args),
    }
}

P.S。

组件中的每个函数都有自己的文件......现在是新对象上的方法的函数

您在单独的文件中定义方法很奇怪。你可能在这里有更深层次的设计问题。

使用Object.assign（闭包）

1 个答案: