javascript - 如何避免使用大量 `document.createElement`来显示JSON数据。

Question

进行 API 调用并获取请求的数据后，我尝试将其显示在页面上。但是，我知道在普通 JS 中执行此操作只有两种方法:一种是使用 innerHTML 并将所有代码放在那里，另一种是使用多个 object.createElement > 来电。

这是我的代码中执行此操作的部分。每次进行 API 调用并加载响应时都会调用此函数:

function buildLinks() {
    spin();
    /*  Checks if current user [passed as param] is currently live by matching userID's from 'streams' and 'users'
        For each user that's live, add a 'name' property to userID_stream with the name of the game being played. */
    userID_users.forEach(elem => {
        function checkIfLive(user) {
            for (let key of userID_streams) {
                if (key.user_id == user.id) {
                    if (key.name == null) {
                        userGame.textContent = "Not In Game."
                        return true;
                    } else {
                        userGame.textContent = "Game: " + key.name;
                        return true;
                    }
                }
            }
        }
        const mainDiv = document.createElement('div');
        const imgDiv = document.createElement('div');
        const textDiv = document.createElement('div');
        const userLinkText = document.createElement('p');
        const userLinkUrl = document.createElement('a');
        const userImg = document.createElement('img');
        const userStatus = document.createElement('p');
        const userGame = document.createElement('p');

        userLinkUrl.href = `https://twitch.tv/${elem.login}`;
        userLinkUrl.textContent = `${elem.display_name}`;

        userImg.src = `${elem.profile_image_url}`;

        if (checkIfLive(elem)) {
            userStatus.textContent = 'Live';
            userStatus.classList.add('status_live');
        } else {
            userStatus.textContent = 'Offline';
            userStatus.classList.add('status_offline');
        }

        userLinkText.appendChild(userLinkUrl);
        imgDiv.appendChild(userImg);
        textDiv.appendChild(userLinkText);
        textDiv.appendChild(userStatus);
        textDiv.appendChild(userGame);

        userLinkText.classList.add('username');
        userStatus.classList.add('status');
        userGame.classList.add('game');
        mainDiv.classList.add('stream');
        imgDiv.classList.add('stream_img');
        textDiv.classList.add('stream_desc');

        mainDiv.appendChild(imgDiv);
        mainDiv.appendChild(textDiv);
        content.appendChild(mainDiv);
    });
}

正如您所看到的，它有大量的重复和创建元素，然后添加 calsses 并将每个创建的元素附加到父元素中。

我的问题是，有没有更好的方法来做到这一点，使用 vanilla JS？如果是这样，我该怎么办？

Answer 1

你最终会重新发明轮子，所以只需使用一些有帮助的 View 库(除了 jQuery，永远不要使用 jQuery)。

你可能会写这样的东西:

const element = (name, ...args) => {
  const e = document.createElement(name);
  args.forEach(arg => {
    if (arg instanceof HTMLElement)
      e.appendChild(arg);
    else if (typeof arg == 'string')
      e.appendChild(document.createTextNode(arg));
    else
      Object.entries(arg).forEach(([key, value]) => e.setAttribute(key, value));
  });
  return e;
};

console.log(
  element("div", { class: "main" },
    element("h1", "Title"),
    element("div", { class: "content" },
      element("span", "Text Here"),
      element("span", "Even More Text Here")
    )
  ).outerHTML
);