将接收到的json数据转化成html

目录

场景：

一、使用 JavaScript 和 HTML 共同渲染页面的模板语言

二、模板字面量语法

---

场景：

假设我们收到了一个json的聊天数据，想把它变成html渲染在网页上

一、使用 JavaScript 和 HTML 共同渲染页面的模板语言

if (nowUser) { 
        console.log(nowUser)
        html = "<div class=\"el-row\" style=\"padding: 5px 0\">\n" +
            "  <div class=\"el-col el-col-22\" style=\"text-align: right; padding-right: 10px\">\n" +
            "    <div class=\"tip left\">" + text + "</div>\n" +
            "  </div>\n" +
            "  <div class=\"el-col el-col-2\">\n" +
            "  <span class=\"el-avatar el-avatar--circle\" style=\"height: 40px; width: 40px; line-height: 40px;\">\n" +
            "    <img alt='' src=\" \" style=\"object-fit: cover;\">\n" +
            "  </span>\n" +
            "  </div>\n" +
            "</div>";
      }

这种写法的主要优点是其灵活性和简单易懂，JavaScript 可以方便地处理一些具有复杂逻辑、动态效果或交互需求的 UI 渲染问题，并直接将结果插入到 HTML 页面上，不需要专门编写结构和样式代码。此外，在组件化开发中也有很大的优势。

然而，这种写法可能存在代码与模板分离不彻底、维护成本高、安全性不强等缺点。由于 JavaScript 和 HTML 代码融为一体，因此修改页面时更容易对页面数据和样式产生影响，从而使得维护变得困难。如果没有良好的开发规范和标准，这种写法还可能导致 XSS 攻击等安全问题。

二、模板字面量语法

if (nowUser) { 
  console.log(nowUser)
  const html = `
    <div class="el-row" style="padding: 5px 0">
      <div class="el-col el-col-22" style="text-align: right; padding-right: 10px">
        <div class="tip left">${text}</div>
      </div>
      <div class="el-col el-col-2">
        <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">
          <img alt='' src="${nowUser.image}" style="object-fit: cover;">
        </span>
      </div>
    </div>
  `;
}

这种写法可以根据一个变量 nowUser 的值条件性地在控制台输出一段文本，并且使用 JavaScript 模板字符串方便地生成、插入 HTML 页面中的 DOM 元素，比刚刚的写法更加简洁、易于读写。但是它也需要开发者手动将生成的 HTML 字符串插入到指定 DOM 元素中，容易引起 XSS 攻击或其他安全问题。

扫描二维码关注公众号，回复： 15240966 查看本文章

相较于刚刚的写法，这种写法充分利用了 JavaScript 与 HTML 交互的特性，避免了大量重复、繁琐的 HTML 结构和样式代码，提高了代码可读性和开发效率。同时，通过模板字符串的方式可以动态展示用户信息等具有实时性的数据。

不足之处主要在于，在多次生成和插入大量 DOM 元素的情况下，可能会导致浏览器性能缓慢，从而影响页面加载速度和响应时间。此外，由于所有逻辑和功能都集中在一个函数中，可能难以维护和扩展，在组件化开发时建议使用更为现代的框架或库来实现。