第三节 json数据绑定以及dom回流重绘、映射

----------------------------------json----------------------------------------------
json是一种特殊的数据格式
Json相对于普通格式来说，只是把属性名用双引号包起来了（单引号不行）
在window浏览器中，提供了一个叫做(window.JSON)JSON的属性，它里面提供了两个方法：
1>JSON.parse(xxx)   在ie6~8不支持
2>JSON.stringify(xxx)  在ie6~8不支持

    //1>把JSON格式的字符串转换为JSON的对象
    var str1 = '{"name":"张三","age":18}';
    JSON.parse(str1);//ie6~8不支持
    eval("(" + str1 + ")");//一定要记住使用eval的话，不要忘记手动加一个括号（ie6~8支持）

    //2>把JSON格式的对象转换为JSON格式的字符串
    var str2 = {"name": "张三", "age": 18};
JSON.stringify(str2);//ie6~8不支持

------------------------------数据绑定以及dom回流-----------------------------------------------
第一种方式 动态创建节点和把它追加到页面中的方式实现数据绑定
        for (var i = 0; i < ary.length; i++) {
            var ali1 = document.createElement('li');
            ali1.innerHTML='<span>'+'0'+(i+4)+'</span>'+ary[i].name;
            oul.appendChild(ali1);
        }
优势：把需要动态绑定的内容一个个的追加到页面中，对原来的元素没有影响
弊端：浏览器每当创建一个li，我们就添加到页面中，引发一次dom的回流，最终导致回流次数过多，影响性能


第二种：字符串拼接方式：首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串方式拼接到一起，拼接完成后，最后统一添加到页面中，工作中最常用的方式
        var str = '';
        for (var i = 0; i < ary.length; i++) {
            str += '<li>';
            str += '<span>' + '0' + (i + 4) + '</span>' + ary[i].name;
            str += '</li>';
        }
        oul.innerHTML += str;
        相当于oul.innerHTML = oul.innerHTML(把之前的三个li以字符串的方式获取到)+str 拼接完成的整体还是字符串，最后把字符串统一的添加到了页面中，浏览器还需要把字符串渲染成对应的标签
弊端：我们把新拼接的字符串添加到ul中，原来标签绑定事件消失了，鼠标滑过效果消失
优势：事先把内容拼接好，最后统一添加到页面中，只引发一次回流



    第三种方式:文档碎片
    var frg = document.createDocumentFragment();//创建一个文档碎片，相当于创建了一个容器
    for (var i = 0; i < ary.length; i++) {
        var ali1 = document.createElement('li');
        ali1.innerHTML = '<span>' + '0' + (i + 4) + '</span>' + ary[i].name;
        frg.appendChild(ali1);
    }
    oul.appendChild(frg);
    frg = null;


 js中dom深入知识（浏览器是如何渲染页面的）
 1、回流（重排）当页面中的html结构发生改变（增加或者删除元素或者位置发生改变），浏览器都需要重新计算一遍最新的dom结构，重新的对当前页面进行渲染
 2、重绘  某一个元素的部分样式发生改变了（背景颜色、字体大小），浏览器只需要重新渲染当前元素即可
 js优化性能：尽量减少回流
---------------------------------------------表格排序以及dom映射----------------------------------
表格排序：把页面中html结构，按照某一个规律进行升降序排序
上课案例：图1排列成图2

css样式略

html结构：
<ul>
    <li>1</li>
    <li>19</li>
    <li>10</li>
    <li>2</li>
</ul>

js写法：
    var oul = document.getElementsByTagName('ul')[0];
//获取到类数组
var ali=document.getElementsByTagName('li');
//将类数组转换为数组
    var arr = utils.listToArray(ali);
    //  给数组进行排序
    arr.sort(function (a, b) {
        return parseFloat(a.innerHTML) - parseFloat(b.innerHTML);
    });
    // 按照数组中的最新顺序依次的把对应的li添加到页面中
    var frg = document.createDocumentFragment();
    for (var i = 0; i < arr.length; i++) {
        frg.appendChild(arr[i]);
    }
    oul.appendChild(frg);
frg = null;
页面上为何不是8条数据？
原因：由于dom映射机制，操作的是每一个li元素对象，把li元素对象的顺序追加到oul中，同时也相当于让页面中的li标签的顺序调整了

dom映射机制：
页面中的标签和js中获取到的元素对象（元素集合）是紧紧的绑定在一起的，页面中的html结构改变了，js中不需要重新获取，集合里面的内容也会跟着自动改变

作业:复杂的表格排序详见案例库
升降序的排列规律：利用了-1*1=-1  -1*-1=1的特点