能否在对象初始化时初始化方法与属性以简化DOM创建代码？

原生的document.createElement并不支持你伪代码里的这种写法——它的第二个参数是ElementCreationOptions，只能用来指定少数特定配置（比如自定义元素的is属性），没法直接在里面调用方法或者批量设置任意属性。但你可以通过自己封装工具函数的方式，实现类似的简洁初始化效果。

方法1：封装通用创建函数 #

写一个工具函数，接收标签名和配置对象，遍历配置时区分属性赋值和方法调用：

function createElem(tag, config = {}) {
  const elem = document.createElement(tag);
  for (const key in config) {
    const value = config[key];
    if (typeof value === 'function') {
      // 传入元素本身供方法调用
      value(elem);
    } else {
      // 直接赋值属性
      elem[key] = value;
    }
  }
  return elem;
}

用这个函数实现你想要的效果：

return createElem('col', {
  appendChildren: (col) => {
    col.appendChild(createElem('p', { innerText: 'Hello' }));
    col.appendChild(createElem('p', { innerText: 'World' }));
  }
});

方法2：优化子元素处理 #

如果需要更直观的子元素声明，可以给工具函数加个children属性的特殊处理：

function createElem(tag, config = {}) {
  const elem = document.createElement(tag);
  const { children, ...rest } = config;

  // 处理属性和自定义方法
  for (const key in rest) {
    const value = rest[key];
    typeof value === 'function' ? value(elem) : elem[key] = value;
  }

  // 批量添加子元素
  if (children) {
    children.forEach(child => {
      elem.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
    });
  }
  return elem;
}

使用时写法会更接近你的伪代码：

return createElem('col', {
  children: [
    createElem('p', { innerText: 'Hello' }),
    createElem('p', { innerText: 'World' })
  ]
});

总结 #

原生DOM API没法直接实现你想要的语法，但通过简单封装工具函数，就能实现既可以初始化属性、又能执行方法（比如添加子元素）的简洁写法，完全满足你的需求。

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