模板引擎前的三种常见的将js数据转换为视图的方法

本文链接：https://blog.csdn.net/lfeishumomol/article/details/125953644

众所周知:模板引擎是将数据转化为视图的一种解决方案在此之前又有哪些呢？

body 结构

<body>
    <ul id="list">

    </ul>
</body>

纯DOM 法

    var arr = [
        {"name":"小明","age":12,"sex":"男"},
        {"name":"小红","age":11,"sex":"女"},
        {"name":"小强","age":13,"sex":"男"}
    ]
    // 纯dom很笨拙 这里只简单演示
    // 创建文档碎片 减少往真实dom中添加元素的次数,减少渲染次数 优化性能
    const frag = document.createDocumentFragment()

    const list = document.querySelector('#list')
    
    for (let i = 0; i < arr.length; i++) {
        let li = document.createElement('li')
        li.innerHTML = arr[i].name
        frag.appendChild(li)
    }
    list.appendChild(frag)

数组join法

因为在模板字符串之前字符串换行是非常麻烦的

所以就可以通过将字符串放进一个数组里面,再通过数组的Join方法进行字符串的整合

注: 在vscode 中按住alt 键使用多行光标就能快速给标签添加' 和逗号

    var arr = [
        {"name":"小明","age":12,"sex":"男"},
        {"name":"小红","age":11,"sex":"女"},
        {"name":"小强","age":13,"sex":"男"}
    ]
    // 创建文档碎片 减少往真实dom中添加元素的次数,减少渲染次数 优化性能
    const frag = document.createDocumentFragment()

    const list = document.querySelector('#list')

    for (let i = 0; i < arr.length; i++) {
        let li = document.createElement('li')
            li.innerHTML = [
            '<li>',
                '<p>'+arr[i].name+'</p>',
                '<h2><span>'+arr[i].age+'</span>',
                    '<span>'+arr[i].sex+'</span>',
                '</h2>',
            '</li>',
            ].join('')
        frag.appendChild(li)
    }
    list.appendChild(frag)

es6 模板字符串法

这个也是目前非模板引擎中最方便的

只需要在反引号中添加${} 就可以操作变量了

    var arr = [
        {"name":"小明","age":12,"sex":"男"},
        {"name":"小红","age":11,"sex":"女"},
        {"name":"小强","age":13,"sex":"男"}
    ]
    // 纯dom很笨拙 这里只简单演示
    // 创建文档碎片 减少往真实dom中添加元素的次数,减少渲染次数 优化性能
    const frag = document.createDocumentFragment()

    const list = document.querySelector('#list')

    for (let i = 0; i < arr.length; i++) {
        let li = document.createElement('li')
            li.innerHTML = `
            <li>${arr[i].name}</li>
            <p>已经</p>
            <span>${arr[i].age}岁了</span>
            <span>性别${arr[i].sex}</span>
            `
        frag.appendChild(li)
    }
    list.appendChild(frag)