JSON的方法及数据绑定

Love The Way You Lie 2022-06-08 13:44 457阅读 1赞

<table> 
 <tbody> 
  <tr> 
   <td><b>前后端交互模型</b></td> 
  </tr> 
 </tbody> 
</table>

![这里写图片描述][SouthEast]

<table> 
 <tbody> 
  <tr> 
   <td><b>json格式对象</b></td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td><b>json的方法</b></td> 
  </tr> 
 </tbody> 
</table>

在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文件代码：

> 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以字符串的方式获取到，拼接完成的整体还是一个字符串，最后再把字符串统一的添加到页面中，浏览器还需要把这些字符串渲染成为对应的标签。相当于把之前的元素都“拿出来”再“放进去”。  
优势：事先把内容拼接好，最后统一添加到页面中，只引发一次回流。  
字符串拼接绑定数据是最常用的一种绑定数据的方式。

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

> 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;

<table> 
 <tbody> 
  <tr> 
   <td><b>DOM的回流与重绘</b></td> 
  </tr> 
 </tbody> 
</table>

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

[SouthEast]: /images/20220608/309b84a15756425d9ca0916609df2fd3.png