如何批量关联HTML对话框ID与对应JavaScript类并实例化？

你给出的代码思路完全可行，这就是批量关联div ID与对话框类、并实例化的高效方式，还能轻松支持同一类创建多个实例的需求。

基础实现（直接复用你的思路） #

直接通过配置数组循环创建实例即可，要给同一类创建多个实例，只需在数组中添加对应配置项：

let dialogARR = [];
// 示例：给DialogWibble类创建两个不同实例
[{divStr: "divMyDialog1", className: MyDialog1},
 {divStr: "divSomethingElse", className: DialogWibble},
 {divStr: "divAnotherWibble", className: DialogWibble},
 {divStr: "divPingPong", className: DialogWobble}].forEach(o => dialogARR.push(new o.className(o.divStr)));

进阶优化：配置与逻辑分离 #

如果需要维护大量对话框，建议将配置单独抽离，提升可维护性：

// 独立的配置集合，后续修改只需调整这里
const dialogConfigs = [
  {divStr: "divMyDialog1", className: MyDialog1},
  {divStr: "divSomethingElse", className: DialogWibble},
  {divStr: "divAnotherWibble", className: DialogWibble},
  {divStr: "divPingPong", className: DialogWobble}
];

// 统一的实例化逻辑
const dialogInstances = dialogConfigs.map(config => new config.className(config.divStr));

可选：添加校验逻辑 #

为避免因配置错误（如div不存在、类未定义）导致报错，可增加简单校验：

const dialogInstances = dialogConfigs.map(config => {
  // 校验类是否为可实例化的函数，且目标div存在于DOM中
  if (typeof config.className === 'function' && document.getElementById(config.divStr)) {
    return new config.className(config.divStr);
  }
  console.warn(`无法实例化对话框：div ${config.divStr} 不存在或类 ${config.className?.name || '未知'} 无效`);
  return null;
}).filter(inst => inst !== null); // 过滤掉无效实例

这种方式既满足了批量关联的核心需求，又能灵活支持同一类多实例的场景，后续维护成本极低。

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