JSON的方法及数据绑定

前后端交互模型

json格式对象

json不是一个单独的数据类型，它只是一种特殊的数据格式，是对象数据类型。
普通格式对象：var obj = {name: "abc", age: 7};
JSON格式对象：var jsonObj = {"name": "abc", "age": 7};
相对于普通格式来说，只是把属性名用双引号包起来了

json的方法

在window浏览器对象中，提供了一个叫JSON的属性（window.JSON），里面提供了两个方法。

1. JSON.parse：把JSON格式的字符串转换为JSON格式的对象
2. JSON.stringify：把JSON格式的对象转换为JSON格式的字符串

参考代码：

//对象转为字符串：
var jsonObj = {"name": "abc", "age": 7};
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);  //'{"name":"abc","age":7}'

//字符串转为对象：
var str = '{"name": "abc", "age": 7}';
console.log(JSON.parse(str));  //{name: "abc", age: 7}

在IE6和7中，window下没有JSON对象，parse和stringify都不存在
把JSON格式的字符串转换为JSON格式的对象：

eval("(" + str + ")"); //使用eval的话要手动的加一个小括号

综合代码：

//把JSON格式的字符串转换为JSON格式的对象
jsonParse: function (jsonStr) {
    return 'JSON' in window ? JSON.parse(jsonStr) : eval("(" + jsonStr + ")");
}

把JSON格式的对象转换为JSON格式的字符串

数据绑定

JSON文件代码：

var ary = [
    {
        "title": "乡下来的王宝强赵丽颖 为什么必须大红大紫？",
        "desc": "影视娱乐业大概是少数能够突破阶层固化的行业之一，它依靠天赋、勤奋和机遇，自带机会均等属性，父辈和其他人的帮忙和托举，只能产生某些催化作用，断难持久。"
    },
    {
        "title": "一家六口吃海鱼中毒紧急送院 这毒素比河豚强100倍",
        "desc": "黄先生说，除了不吃鱼的小儿子，妻子、两个女儿、两名亲戚都中了招，被送到珠海市人民医院。妻子因为吃了大块鱼腩，情况最为严重，目前在重症监护室观察。"
    },
    {
        "title": "女子违停被贴罚单 在朋友圈辱骂交警被拘2天",
        "desc": "9月27日从浙江缙云县警方获悉，违法停车被贴罚单后，当地一女子为发泄不满，在微信发了一条辱骂交警的朋友圈，被警方处以行政拘留2天。"
    }
];

HTML文件代码：

<ul id="ul1">
    <li><span class="bg">1</span>************</li>
    <li><span class="bg">2</span>************</li>
    <li><span class="bg">3</span>************</li>
</ul>

1.利用动态创建元素节点和把它追加到页面中的方式实现数据绑定

代码如下：

var oUl = document.getElementById("ul1");
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;
    oUl.appendChild(oLi);
}

该方法的优势：把需要动态绑定的内容一个个的追加到页面当中，对原来的元素没有任何影响。appendChild：把元素添加到指定的容器中（末尾）
弊端：浏览器每创建一个li，就添加到页面当中，引发一次DOM的回流，最后引发回流的次数过多，影响性能

2.字符串拼接方式

算法分析：首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接在一起，拼接完成后，统一的追加到页面当中
代码：

var oUl = document.getElementById("ul1");
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>";
}
oUl.innerHTML += str;

弊端：把新拼接的字符串添加到#ul1中，原有的效果都消失了，原来标签绑定的事件都消失了。因为最后一句：oUl.innerHTML = oUl.innerHTML + str;   oUl.innerHTML把之前的三个li以字符串的方式获取到，拼接完成的整体还是一个字符串，最后再把字符串统一的添加到页面中，浏览器还需要把这些字符串渲染成为对应的标签。相当于把之前的元素都“拿出来”再“放进去”。
优势：事先把内容拼接好，最后统一添加到页面中，只引发一次回流。
字符串拼接绑定数据是最常用的一种绑定数据的方式。

模板引擎数据绑定，如：jade、kTemplate、angular.js、backbone.js等。模板引擎原理就是字符串拼接。

3.文档碎片方式

创建一个文档碎片，相当于临时创建了一个容器

var oUl = document.getElementById("ul1");
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);
}
oUl.appendChild(frg);
frg = null;

DOM的回流与重绘

回流又叫重排（reflow）：当页面中的HTML结构发生改变，如增加、删除元素、位置改变等，浏览器都需要重新计算一遍最新的DOM结构，重新的进行渲染。
重绘：某一个元素的部分样式发生了改变，如背景颜色，浏览器只需要重新的渲染当前元素即可。
故需要尽量减少DOM的回流。