你还在使用DOM一个一个渲染后台数据吗？

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

前言

作为一个大二的在读学生，大一时做东西还是使用DOM渲染数据，记得当时渲染一次就渲染要绑定35个DOM，一个一个的绑定ID，每次修改都要对每个DOM进行修改，非常的麻烦。

最近又要渲染数据了，从学长哪里了解到了有模版字符串，尝试之后发现渲染速度块多了。

描述

模板字符串使用反引号 ( ) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。

使用

let html = `<div>123</div>`

$('.fisttable').append(html)

例如我们要渲染一个表格 按照原始的 我们还要一个一个绑定dom
但是使用模版字符串我们就可以快捷渲染

                let html = ` <table border="1" cellspacing="0">

                    <tr align="center">

                        <td class="nametable">姓名</td>

                        <td class="anotable">学号</td>

                        <td class="phonetable">电话</td>

                        <td class="emailtable">邮箱</td>

                        <td class="hometable">家庭住址</td>

                        <td id="id_cardtable">身份证后6位</td>

                    </tr>

                    <tr align="center">

                        <td class="nametable">${userinfo[0].user_name}</td>

                        <td>${userinfo[0].uid}</td>

                        <td>${userinfo[0].phone}</td>

                        <td>${userinfo[0].email}</td>

                        <td>${userinfo[0].address}</td>

                        <td>${userinfo[0].Id_card}</td>

                    </tr>

                </table> `;

                $('.fisttable').append(html)

使用这样的格式就能快速渲染数据

缺点

当后台只有少量数据时且经常变化是感觉还是DOM好用,但是当后台数据过多时使用DOM渲染会非常麻烦,使用这种方法就会减少你的代码量，提高工作效率。