Vanilla JavaScript模块：如何在Gen类中调用main.js的createTopic函数？

ES模块拥有独立的模块作用域，模块内部定义的函数、变量不会自动成为全局对象的属性。你在main.js里定义的createTopic只存在于main.js的模块作用域中，Gen.js作为独立模块无法直接访问，所以会抛出"createTopic is not a function"的错误。以下是几种可行的解决方案：

方案一：依赖注入（推荐） #

通过Gen类的构造函数将createTopic传递进去，让Gen实例持有该函数的引用，同时解耦两个模块的依赖关系：

1. 修改main.js：

import { Gen } from "./classes/Gen.js";

function createTopic() {
    console.log("Hello");
}

// 注意：变量名不要和导入的Gen类重名，这里改为gen
let gen = new Gen(createTopic);

2. 修改Gen.js：

export class Gen {
    constructor(createTopic) {
        // 将传入的函数保存为实例属性
        this._createTopic = createTopic;
    }

    _someMethod() {
        this._createTopic();
    }
}

方案二：将createTopic导出为模块成员 #

把createTopic从main.js导出，在Gen.js中直接导入使用：

1. 修改main.js：

// 导出createTopic函数
export function createTopic() {
    console.log("Hello");
}

import { Gen } from "./classes/Gen.js";
let gen = new Gen();

2. 修改Gen.js：

// 从main.js导入createTopic，注意路径要匹配实际文件结构
import { createTopic } from "../main.js";

export class Gen {
    constructor() {}

    _someMethod() {
        createTopic();
    }
}

注意：这种方式会形成循环导入（main.js导入Gen，Gen.js导入main.js），需要确保模块初始化逻辑不会因此出现执行顺序问题。

方案三：挂载到全局对象（不推荐） #

将createTopic挂载到浏览器的全局window对象上，让Gen.js可以直接访问：

1. 修改main.js：

import { Gen } from "./classes/Gen.js";

function createTopic() {
    console.log("Hello");
}

// 挂载到全局window对象
window.createTopic = createTopic;

let gen = new Gen();

2. Gen.js无需修改，直接调用即可：

export class Gen {
    constructor() {}

    _someMethod() {
        createTopic();
    }
}

不推荐此方案，因为会污染全局作用域，违背ES模块的封装设计理念。

内容的提问来源于stack exchange，提问作者Jericho