Electron多窗口IPC架构优化：避免main.js膨胀及提升灵活性

嘿，我完全懂你现在的困扰——当窗口数量增多时，main.js里堆着一堆重复的IPC监听，逻辑混在一起，维护起来简直头大！结合你刚接触JavaScript原型式面向对象编程的情况，我给你分享几个实用的最佳实践，既能拆分代码避免main.js无限膨胀，又能提升IPC的灵活性，还能保留全局视野：

1. 把窗口逻辑封装成ES6类（或原型类） #

把每个窗口的创建、IPC监听、生命周期管理都封装成独立的类，main.js只负责管理这些窗口实例，不用关心每个窗口的具体IPC细节。这样每个窗口的逻辑都自成一体，维护起来更清晰。

比如针对你示例中的文件选择窗口，我们可以封装一个类：

// src/windows/ImagePickerWindow.js
const { BrowserWindow, ipcMain, dialog } = require('electron');

class ImagePickerWindow {
  constructor() {
    this.window = null;
    this._createWindow();
    this._registerIpcHandlers();
  }

  _createWindow() {
    this.window = new BrowserWindow({
      width: 400,
      height: 300,
      webPreferences: {
        preload: `${__dirname}/preloads/image-picker-preload.js`
      }
    });
    this.window.loadFile('src/renderers/image-picker.html');
  }

  _registerIpcHandlers() {
    // 只处理当前窗口相关的IPC事件
    ipcMain.on('image-picker:open-dialog', (event) => {
      dialog.showOpenDialog(this.window, {
        title: 'Select a image...',
        properties: ['openFile'],
        defaultPath: '/home',
        buttonLabel: "Select...",
        filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]
      }, (files) => {
        if (files) event.sender.send('image-picker:selected-item', files);
      });
    });

    // 可以在这里添加更多该窗口专属的IPC监听
  }

  // 提供对外的窗口控制方法
  show() {
    this.window.show();
  }
}

module.exports = ImagePickerWindow;

然后在main.js里只需要实例化这个类即可：

// main.js
const { app } = require('electron');
const ImagePickerWindow = require('./src/windows/ImagePickerWindow');

let imagePickerWindow;

app.whenReady().then(() => {
  imagePickerWindow = new ImagePickerWindow();
  // 其他窗口也用同样的方式实例化
});

2. 给IPC事件添加命名空间规范 #

不要再用window1-call1这种模糊的命名，而是采用命名空间+动作的格式，比如[窗口类型]:[动作]，比如image-picker:open-dialog、settings:save-config。这样不仅能清晰区分不同窗口的IPC事件，还能方便后续做路由分发。

你可以在main.js里做一个简单的IPC路由器，根据事件前缀把请求转发给对应的窗口实例处理：

// main.js
const ipcRouter = {
  'image-picker': imagePickerWindow.handleIpcEvent,
  'settings': settingsWindow.handleIpcEvent
};

ipcMain.on('ipc-router', (event, channel, ...args) => {
  const [namespace] = channel.split(':');
  if (ipcRouter[namespace]) {
    ipcRouter[namespace](event, channel, ...args);
  }
});

然后在窗口类里实现handleIpcEvent方法，根据具体的channel处理逻辑：

// ImagePickerWindow.js
handleIpcEvent(event, channel, ...args) {
  switch(channel) {
    case 'image-picker:open-dialog':
      this._handleOpenDialog(event);
      break;
    case 'image-picker:clear-selection':
      this._handleClearSelection(event);
      break;
    // 其他动作...
  }
}

3. 拆分预加载脚本，模块化IPC调用 #

不要把所有预加载逻辑堆在一个preload.js里，每个窗口对应自己的预加载脚本，把和该窗口相关的IPC调用封装成易用的API暴露给渲染进程，渲染进程不用关心底层的IPC通道名。

比如针对图片选择窗口的预加载脚本：

// src/preloads/image-picker-preload.js
const { ipcRenderer, contextBridge } = require('electron');

contextBridge.exposeInMainWorld('imagePickerApi', {
  openImageDialog: () => ipcRenderer.invoke('image-picker:open-dialog'),
  onImageSelected: (callback) => {
    ipcRenderer.on('image-picker:selected-item', (_, files) => callback(files));
    return () => ipcRenderer.removeAllListeners('image-picker:selected-item');
  }
});

然后在渲染进程里直接调用封装好的API，代码更简洁：

// src/renderers/image-picker.js
document.getElementById('selectDirBtn').addEventListener('click', async () => {
  const files = await window.imagePickerApi.openImageDialog();
  setSelectedItem(files);
});

function setSelectedItem(files) {
  document.getElementById('selectedItem').innerHTML = files;
}

4. 拆分IPC处理逻辑到独立模块 #

如果暂时不想用类，也可以把不同窗口的IPC处理逻辑拆成单独的模块，main.js只负责引入并注册这些模块的监听，让main.js保持清爽的入口角色。

比如创建一个专门处理图片选择窗口IPC的模块：

// src/ipc-handlers/image-picker-handler.js
const { ipcMain, dialog } = require('electron');

function registerImagePickerHandlers(window) {
  ipcMain.on('image-picker:open-dialog', (event) => {
    dialog.showOpenDialog(window, {
      // 配置和之前一样
    }, (files) => {
      if (files) event.sender.send('image-picker:selected-item', files);
    });
  });
}

module.exports = registerImagePickerHandlers;

然后在main.js里引入并注册：

// main.js
const registerImagePickerHandlers = require('./src/ipc-handlers/image-picker-handler');

app.whenReady().then(() => {
  const imagePickerWindow = new BrowserWindow({ /* 配置 */ });
  registerImagePickerHandlers(imagePickerWindow);
  // 其他窗口的IPC处理也用同样的方式引入注册
});

这些方法都能帮你把main.js里的臃肿逻辑拆分出去，同时通过类或者模块的方式保留对全局窗口实例的掌控，非常适合你刚接触JS面向对象编程的阶段逐步上手。

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