----------------------------------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的特點