token和文档碎片及模板引擎_文档分段数据和token关系-优快云博客

本文链接：https://blog.youkuaiyun.com/tangyu520lehua/article/details/127655368

token

jsonwebtoken
作用：
- http是无状态的，当咱们登陆了后，跳转到其他的页面，无法知道是否登录过
- 可以使用token可以做个标识（令牌）
- 当登录成功后把这个令牌返回给前端，前端进行存储，在其他页面发送请求的时候，把令牌携带过去，后端进行验证，如果通过说明已经登陆过文档碎片

文档碎片

document.createDocumentFragment()
- 把文档碎片当成一个框
- 遇到一些频繁DOM操作时，把一些操作放在这个框里面，当操作完毕后最后只需要执行一次即可
- 虚拟的DOM节点
document这个文档是一个完整的文档，当咱们操作DOM比较频繁的时候，相当于把文档给破坏了
可以使用文档碎片减少对完整文档结构的破坏，优化性能
问题：
- 首先咱们的document文档默认是一个完整的结构
- 现在遍历数据，有三条数据，向document文档里面插入了三次创建的元素，这个时候就是把文档的完整结构给破坏了
- 导致性能不高
思考
- 可以在外面创建一个div元素（或者其他元素）
- 先把tr标记插入到div元素里面
- 然后再把div元素追加到tbody里面即可
可以使用文档碎片解决问题
文档碎片
- 理解成一个框
- 框就是装东西，先使用框把元素装进去，然后再倒出去
- 主要是做操作DOM时的一些优化
框架中
- 虚拟DOM节点
- 先不操作真实的DOM，先把所有的操作正常操作虚拟的DOM，当需求完成时最终操作一次真实的DOM即可

<body>
    <table border="1" width="500" height="200">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        // 准备一组数据
        let data = [
            {name: '张三', age: 18, sex: '男'},
            {name: '翠花', age: 20, sex: '女'},
            {name: '铁柱', age: 22, sex: '男'}
        ]
        // 获取元素
        let tbody = document.querySelector('tbody')
        console.log(tbody)

        // 创建div元素
        // let div = document.createElement('div')

        // 可以使用文档碎片解决问题
        /*
            文档碎片
            + 理解为成一个框
            + 框就是装东西，先使用框把元素装进去，然后再倒出去
            + 主要是做操作DOM时一些优化的

            框架中
            + 虚拟DOM
            + 先不操作真实的DOM，先把所有的操作正常操作虚拟的DOM，当需求完成时最终操作一次真实的DOM即可
        */
        let frg = document.createDocumentFragment()
        // console.log(frg)
        // 遍历数据
        data.forEach(item=>{
            // 创建一个tr
            let tr = document.createElement('tr')
            tr.innerHTML = `
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
            `
            // 把元素追加到tbody里面
            // tbody.appendChild(tr)

            // div.appendChild(tr)

            frg.appendChild(tr)
        })

        // tbody.appendChild(div)
        tbody.appendChild(frg)

        /*
            问题：
            + 首页咱们的document文档默认是一个完整的结构
            + 现在遍历数据，有三条数据，向document文档里面插入了三次创建的元素，这个时候就是把文档的完整结构给破坏了
            + 导致性能不高
            思考：
            + 可以在外面创建一个div元素（或者其他元素也行）
            + 先把tr标记插入到div元素里面
            + 然后再把div元素追加到tbody里面即可
        */
    </script>

art-template

模板引擎
语法
- {{}}插值语法，里面可以放一个表达式，如果插值语法前面写一个@符号可以解析标记
- 判断
  - {{if}} {{/if}}
    {{if}} {{else}} {{/if}}
    {{if}} {{else if}} {{else}} {{/if}}
  - 遍历
    - {{each target}} {{/each}}
    - 如果不自定义默认使用的就是$value $index
  - template(‘tpl’, {})