從 Electron 中的模塊調用 main.js 中的對象

Question

我有一個帶有 2 個模塊的 Electron 應用程序，其中一個是標准菜單。 當我單擊菜單項時，我希望它調用實例化模塊的函數。

我發現的唯一解決方案是讓我的實例化對象成為全局可用的主electron.app .app 對象的屬性。

這是我的例子：

主文件

const electron = require('electron');
const app = electron.app;

const WindowManager = require('components/WindowManager');
let windowManager = new WindowManager(); // <- I want my menu item to call a function from this object

const MainMenu = require('components/MainMenu');
let mainMenu = new MainMenu();

function initApp() {
    let menuTemplate = mainMenu.getTemplate();        
    let menuBuilt = electron.Menu.buildFromTemplate(menuTemplate);
    electron.Menu.setApplicationMenu(menuBuilt);
}

function mainTestFileOpen() {
    console.log('File open test function in main.js');
}

// I'm trying to avoid doing this
app.testFileOpen = function() {
    console.log('Function is part of "app" so globally accessible...');
}

// I'm trying to avoid doing this too
app.appWindowManager = new WindowManager();

// Start the app
app.on('ready', initApp);

組件/WindowManager.js

class WindowManager {
    constructor() {
        this.doFileOpen = this.doFileOpen.bind(this);
    }

    doFileOpen() {
        console.log('File open from WinwdowManager module');
    }
}
module.exports = WindowManager;

組件/MainMenu.js

const electron = require('electron');
class MainMenu {
    constructor() {
        this.template = [];

        this.init = this.init.bind(this);
        this.getTemplate = this.getTemplate.bind(this);

        // Initialize
        this.init();
    }

    getTemplate() {
        return this.template;
    }

    init() {
        this.template = [{
            label: 'File',
            submenu: [{
                label: "Open File",
                click() {
                    /** Calling a function in main.js does NOT work **/
                    mainTestFileOpen();

                    /** Calling an object in main.js doe NOT work **/
                    windowManager.doFileOpen();

                    /** If the function is part of "app" then it works **/
                    electron.app.testFileOpen();

                    /** If the instantiated object is part of "app" then it works  **/
                    electron.app.appWindowManager.doFileOpen();
                }
            }]
        }]
    }
}

module.exports = MainMenu;

我認為我沒有得到的是電子菜單模板中click()的范圍。

Answer 1

您試圖從不同的模塊調用函數（Node 中的每個文件都是它自己的模塊，這與典型的 JS 環境不同），而沒有先導入模塊。

僅僅在 main.js 模塊中編寫一個函數是不夠的：

function mainTestFileOpen() {
    console.log('File open test function in main.js');
}

並期望從 MainMenu.js 模塊調用它。 您必須export它：

export function mainTestFileOpen() { ... }

然后，在 MainMenu.js 中，您可以在頂部導入它：

import { mainTestFileOpen } from "../main";

與windowManager相同。 看起來您沒有從 main.js 使用WindowManager做任何事情，所以只需將導入和實例化移動到 MainMenu.js：

import { WindowManager } from "./WindowManager";
let windowManager = new WindowManager();

然后你將能夠做到：

windowManager.doFileOpen();

邊注：

你在你的構造函數中做這樣的事情： this.doFileOpen = this.doFileOpen.bind(this);

沒有必doFileOpen ，因為有人可以調用doFileOpen的唯一方法是在windowManager實例上調用它，如下windowManager ： windowManager.doFileOpen(...) 。

這同樣適用於：

this.init = this.init.bind(this);
this.getTemplate = this.getTemplate.bind(this);