javascript - 是否可以外部化 Electron 菜单模板代码？

Question

我有一个 Electron具有 3 个窗口的应用程序，每个窗口都有不同的菜单。每个菜单的菜单模板代码都很长，我想将其外部化。到目前为止，我没有尝试过任何工作。

我尝试了不同的方法来“模块化”它，但出现了很多错误。以下方法可用于设置菜单，但菜单中引用的功能均无效(例如 quitApplication )。

我试图做的事情是不可能的，还是我只是“做错了”？

var test = require("./app/js/menuTest.js");
var tm = new test();    
var menuTemplate = tm.getMenu();
myWindow = Menu.buildFromTemplate(menuTemplate);

menuTest.js

function testMenu() {
 this.getMenu = function () {
        var menuTemplate = [
            {
                label: global.productData.appName,
                submenu: [
                    { label: 'About ' + global.productData.appName, click: () => { showAboutWindow() } },

                    { type: 'separator' },
                    { role: 'hide' },
                    { role: 'hideothers' },
                    { role: 'unhide' },
                    { type: 'separator' },
                    { label: 'Quit', click: () => { quitApplication() }, accelerator: 'CmdOrCtrl+q' }
                ]
         // code deleted for clarity
        return menuTemplate;
    }
}
module.exports = testMenu;

Answer 1

根据我对您问题的理解，您希望将模板代码移出主流程脚本，但将函数保留在其中。

这可以通过将菜单结构对象移动到单独的模块中来实现。该模块导出一个函数，该函数接受一个对象，该对象引用您要在菜单中调用的函数。

我相信这不会增加显着的复杂性并且只是将菜单模板代码“外部化”。

menu1.js:

module.exports = function(actions) {
    return [
        {
            label: "Foo",
            submenu: [
                { label: "Bar", click: actions.bar },
                { label: "About", click: actions.about }
            ]
        }
    ];
}

main.js:

const {app,BrowserWindow,Menu} = require("electron");

const actions = {
    bar: function () {
        console.log("bar");
    },
    about: function () {
        console.log("about");
    }
};

const menu1_template = require("./menu1.js")(actions);
const menu1 = Menu.buildFromTemplate(menu1_template);
Menu.setApplicationMenu(menu1);

let mainWindow;

app.on("ready", function() {
    mainWindow = new BrowserWindow();
});