多窗口管理

实际上要对多窗口进行管理，原理是非常简单的，主要就是将所有的窗口的引用存储到一个 map 里面，之后要对哪一个窗口进行操作，直接从 map 里面取出对应的窗口引用即可。

// 该 map 结构存储所有的窗口引用
const winMap = new Map();
// ...
// 往 map 里面放入对应的窗口引用
winMap.set(config.name, win);

很多时候，我们的窗口不仅是多个，还需要对这多个窗口进行一个分组。这个时候简单的更改一下 map 的结构即可。

首先在窗口配置方面，新增一个 group 属性，表明该窗口是哪一个分组的。

const win1Config = {
  name: "win1",
  width: 600,
  height: 400,
  show: true,
  group: "grounp1" // 新增一个 grounp 的属性
  file: "window/index.html",
};

第二步，在创建了窗口之后，从 map 里面获取对应分组的数组，这里又分为两种情况：

• 该分组名下的数组存在：直接将该窗口引入放入到该分组的数组里面
• 该分组还不存在：创建新的数组，并且将该窗口引用放入到新分组里面

核心代码如下：

if (config.group) {
  // 根据你的分组名，先找到对应的窗口数组
  let groupArr = winMap.get(config.group);
  if (groupArr) {
    // 如果数组存在，直接 push 进去
    groupArr.push(win);
  } else {
    // 新创建一个数组，作为该分组的第一个窗口
    groupArr = [win];
  }
  // 接下来更新 map
  winMap.set(config.group, groupArr);
}

之后，在窗口进行关闭操作时，还需要将关闭的窗口实例从 map 结构中移除掉。

// 接下来还需要监听窗口的关闭事件，以便在窗口关闭时将其从 map 结构中移除
win.on("close", () => {
  groupArr = winMap.get(config.group);
  // 因为当前的窗口已经关闭，所以我们需要将其从数组中移除
  groupArr = groupArr.filter((item) => item !== win);
  // 接下来更新 map
  winMap.set(config.group, groupArr);
  // 如果该分组下已经没有窗口了，我们需要将其从 map 结构中移除
  if (groupArr.length === 0) {
    winMap.delete(config.group);
  }
});