javascript - 用普通的旧 JS 动态渲染 DOM 元素的好方法是什么？

Question

我面临的挑战是使用普通的旧 Javascript 构建单页应用程序，不允许使用任何库或框架。虽然在 React 和 Angular 中创建动态 DOM 元素相当简单，但我提出的普通 JS 解决方案似乎很笨拙。我想知道是否有一种特别简洁或有效的方法来构建动态呈现的 DOM 元素？

下面的函数接受一个从 GET 请求接收的数组，并为每个项目呈现一个 div，传递值(很像你在 React 中映射结果并呈现子元素)。

 function loadResults(array) {
  array.forEach(videoObject => {
    let videoData =  videoObject.snippet;
    let video = {
       title : videoData.title,
       img : videoData.thumbnails.default.url,
       description : videoData.description
    };
    let div = document.createElement("DIV");
    let img = document.createElement("IMG");
    img.src = video.img;
    let h4 = document.createElement("h4");
    let title = document.createTextNode(video.title);
    h4.appendChild(title);
    let p = document.createElement("p");
    let desc = document.createTextNode(video.description);
    p.appendChild(desc);

    div.appendChild(img);
    div.appendChild(h4);
    div.appendChild(p);
    document.getElementById('results')
      .appendChild(div);
  });
}

这感觉很笨拙，但我还没有找到更简单的方法。

提前致谢!

Answer 1

Note: Everything I say here is on the proof of concept level and nothing more. It does not handle errors or exceptional cases, nor was it tested in production. Use at your own discretion.

一个好的方法是创建一个为您创建元素的函数。像这样:

const crEl = (tagName, attributes = {}, text) => {
  const el = document.createElement(tagName);
  Object.assign(el, attributes);
  if (text) { el.appendChild(document.createTextNode(text)); }

  return el;
};

然后你可以像这样使用它:

results
  .map(item => crEl(div, whateverAttributes, item.text))
  .forEach(el => someParentElement.appendChild(el));

我见过的另一个很酷的概念证明是使用 ES6 Proxies as a sort of templating engine .

const t = new Proxy({}, {
  get(target, property, receiver) {
    return (children, attrs) => {
      const el = document.createElement(property);
      for (let attr in attrs) {
        el.setAttribute(attr, attrs[attr]);
      }
      for (let child of(Array.isArray(children) ? children : [children])) {
        el.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
      }
      return el;
    }
  }
})

const el = t.div([
  t.span(
    ["Hello ", t.b("world!")], {
      style: "background: red;"
    }
  )
])

document.body.appendChild(el);

Proxy 将 get 捕获到目标对象(它是空的)，并呈现一个具有被调用方法名称的元素。这导致了您在 const el = 中看到的非常酷的语法。