动态导入开启。("click", ...) 找不到全局变量

Question

我正在尝试在电子中创建一个应用程序（前端 javascript 端的代码）来帮助我的写作，而我需要的东西是动态加载模块/插件/模块。我实际上能够导入一个从它返回一个类的函数（这是迄今为止我实际上可以动态导入一个类的唯一方法......），它分配了一些 jquery node.on("单击“）未按预期运行。我有几个对象容器，用于将代码的主要部分与任何偶然匹配的变量分开。无论如何，当我单击 on("click") 的元素时，菜单 (MenuManager) 会引发一个错误。

我希望像 MenuManager 这样的变量在应用程序中全局可用，因此插件/模组可以做出任何决定性的更改。

MenuManager.js

//Isolate MenuManager variables to itself, to majorly reduce variable naming mishaps and make it
//easier to modify something later
let MenuManager = {
    menus: []
}

//import PluginDef from "../../Workspaces/Writing/define.js";

$(function () {
    console.log("MenuManager Booting!");

    //Create menus from plugin
    LoadPlugins();
    LoadPlugins();
});

function LoadPlugins() {
    /*const testLoad = import("../../Workspaces/Writing/define.js");
    console.log(testLoad.default.PluginDef().Name);*/

    import("../../Workspaces/Writing/define.js").then((module) => {
        let newModule = module.default();
        newModule.Generate();
        MenuManager.menus.push(newModule);
        console.log("loading: " + MenuManager.menus[0].Name);
    }).catch((err) => {
        console.log(err);
    });
}

导入的define.js

export default function PluginDef() {
    class def {
        constructor() {
            this.Name = "Writing";
            this.MenuBase = "<h5>Menus HTML here</5>";//import from file later
            this.workspaceBase = "<h5>Workspace HTML here</h5>";//import from file later
        }
        Generate() {
            this.GenerateSelector();
            this.GenerateMenu();
            this.GenerateWorkspace();
            this.Run_OnGenerated();
        }

        GenerateSelector() {
            let Self = this;
            //Generate Menu Selector Header
            this.menuSelector = $([
                "<li>",
                this.Name,
                "</li>"
            ].join("\n"));

            //Add listener to selector
            this.menuSelector.on("click", function () {
                //let foundMenu = MenuManager.menus.find(x => x.Name == this.textContent);
                MenuManager.currentMenu.menu.removeClass("selectedMenu");
                MenuManager.currentMenu.workspace.removeClass("selectedWorkPanel");
                MenuManager.currentMenu.Run_OnClose();//Ran whenever menu is deselected

                MenuManager.currentMenu = Self;//Set 'this' to currently selected menu
                MenuManager.currentMenu.menu.addClass("selectedMenu");
                MenuManager.currentMenu.workspace.addClass("selectedWorkPanel");
                MenuManager.currentMenu.Run_OnOpen();//Ran whenever menu is selected
            });

            //Add selector to header
            AppPart.MenuBarSelector.find("ul").append(this.menuSelector);
        }

        GenerateMenu() {
            //Generate Menu
            this.menu = $([
                "<div id='Menu_Writing' class='menuBarPanel'>",
                this.MenuBase,
                "</div>"
            ].join("\n"));
            //Add menu to panels
            AppPart.MenuBarOptionsContainer.append(this.menu);
        }

        GenerateWorkspace() {
            //Generate Workspace
            this.workspace = $([
                "<div id='WorkPanel_Writing' class='workPanel'>",
                this.workspaceBase,
                "</div>"
            ].join("\n"));
            //Add workspace to workspace
            AppPart.WorkAreaContainer.append(this.workspace);
        }

        //When menu is generated, run this function
        Run_OnGenerated() {
            return;//does nothing
        }

        //When menu is selected, run this function
        Run_OnOpen() {
            return;//Does Nothing
        }

        //When menu is deselected, run this function
        Run_OnClose() {
            return;//Does Nothing
        }
    }

    return new def();
}

导入的define.js（特别是第27行）的GenerateSelector()是MenuManager is not defined的错误发生的地方

Answer 1

我没有看到@Chris G 的评论/答案，因为我没有收到电子邮件等。但无论如何，我已经想通了，我认为是靠运气：

我可以创建一个基类并将其放置在窗口中，导入的类可以轻松访问该类，而无需尝试记住或知道任何文件位置（是的，我正在努力保持全局/窗口清洁，而不是推动它有大量变量，只是像这种情况下的几个重要变量）

注意：我无法解释为什么这确实有效，但可能是由于范围。

MenuManager.js

function LoadPlugins() {
    import("../../Workspaces/Writing/define.js").then((module) => {
        let newModule = module.default();
        MenuManager.menus.push(newModule);
        console.log("loaded: " + MenuManager.menus[0].Name);
    }).catch((err) => {
        console.log(err);
    });
}



class PluginBaseDef {
    Name;
    MenuBase;
    workspaceBase;

    menuSelector;
    menu;
    workspace;

    constructor() {
    }

    Generate() {
        this.GenerateSelector();
        this.GenerateMenu();
        this.GenerateWorkspace();
        this.Run_OnGenerated();

        if (!MenuManager.currentMenu.Name) {
            this.ShowMenu();
        }
    }
}

window.PluginBaseDef = PluginBaseDef;

导入的define.js

export default function PluginDef() {
    class def extends window.PluginBaseDef {
        constructor() {
            super();
            this.Name = "Writing";
            this.MenuBase = "<h5>Menus HTML here</5>";//import from file later
            this.workspaceBase = "<h5>Workspace HTML here</h5>";//import from file later
            this.Generate();
        }
    }
    return new def();
}