数据绑定及回流

JSON数据操作

JSON不是一个单独的数据类型，他只是一种特殊的数据格式，是对象数据类型的
相对普通对象来说，JSON格式需要把属性名用双引号包起来
window浏览器对象中，提供了一个JSON属性，该属性下面包含两个方法
JSON.parse：把JSON格式的字符串转换为JSON格式的对象
JSON.stringfy：把JSON格式的对象转换为JSON格式的字符串
IE67中的window没有JSON对象，所以以上两个方法都不存在

var web = {"name": "javascript", "age": "8"};
var jsonWeb = JSON.stringify(web);
console.log(jsonWeb);

// IE67下的处理
eval("(" + str + ")");

JSON格式字符串转为JSON格式对象的兼容写法

jsonParse: function (str) {
        return "JSON" in window ? JSON.parse(str) : eval("(" + str+ ")");
    }

<ul id="ul1">
    <li><span class="bg">01</span>聚焦打赢砺雄师 牢记习近平这些话！</li>
    <li><span class="bg">02</span>坚持与时俱进，完善全球治理</li>
    <li><span class="bg">03</span>约翰逊带女友搬进唐宁街</li>
</ul>

数据绑定

1、动态创建元素节点并添加到页面中实现数据绑定，不会对已有元素产生影响，(原来已经有3个元素)

for (var i = 0; i < ary.length; i++) {
        var cur = ary[i];
        var oLi = document.createElement('li');
        oLi.innerHTML = `<span>${i+4}</span>${cur.title}`;
        oU1.appendChild(oLi);
    }

2、字符串拼接的方式：首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起，拼接完成后统一添加到页面中
但是添加完之后，原有的三个标签上的鼠标滑过效果消失了
解决办法就是把之前的也获取到再加到str上面

var str = "";
    for (var i = 0; i < ary.length; i++) {
        var cur = ary[i];
        str += "<li>";
        str += "<span>" + (i+4) + "</span>";
        str += cur.title;
        str += "</li>";
    }
    oU1.innerHTML += str;

DOM中的回流(reflow)和重绘(repaint)
回流(reflow)：当页面中的HTML结构发生改变（增删元素，位置改变等），浏览器都要重新计算一遍最新的DOM结构，重新对页面进行渲染
重绘(repaint)：某一个元素的部分样式发生了改变（背景颜色），浏览器只需要重新渲染当前元素即可
对于上述两种方式：第一种每创建一个li就添加到页面中引发了DOM回流，创建几次就引发几次，影响性能
第二种实现拼接好要添加的内容，一次性添加，提升了性能。

结合两种方式的第三种方式：文档碎片
创建一个文档碎片相当于创建了一个临时容器，先把每次创建的li放到该容器中，最后将该容器统一添加到页面当中，既不会对原有元素产生影响，又减少了回流次数

var frg = document.createDocumentFragment();
    for (var i = 0; i < ary.length; i++) {
        var cur = ary[i];
        var oLi = document.createElement('li');
        oLi.innerHTML = "<span>" + (i+4) + "</span>" + cur.title;
        frg.appendChild(oLi);
    }
    oU1.appendChild(frg);
    frg = null;