json介紹

• 后臺(tái) -> 提供一個(gè)數(shù)據(jù)請(qǐng)求的接口,前端通過接口地址可以請(qǐng)求到后臺(tái)的數(shù)據(jù)
• 前端 -> 前端得到數(shù)據(jù)后,需要進(jìn)行數(shù)據(jù)解析, 把數(shù)據(jù)綁定在html頁面上 -> "數(shù)據(jù)綁定"

sequenceDiagram
前端->>后臺(tái): 發(fā)送請(qǐng)求獲取數(shù)據(jù)
后臺(tái)->>前端: 把準(zhǔn)備好的數(shù)據(jù)返回給前端
后臺(tái)-->>前端: (后臺(tái)給前端返回的數(shù)據(jù)一般都是json格式的)

上面是markdown的流程圖語法,但是簡書好像不支持,只有截圖了(下圖)

前后端交互

• json不是一個(gè)單獨(dú)的數(shù)據(jù)類型,它只是一種特殊的數(shù)據(jù)格式 -> 它是對(duì)象數(shù)據(jù)類型的

var obj = {name:"lilei", age: 18}; // 普通格式對(duì)象
var jsonObl = {"name":"lilei","age":17}; // json格式對(duì)象  
// 相對(duì)于普通的格式來說,只是把屬性名用雙引號(hào)包起來了(只能是雙引號(hào))

• 在window瀏覽器對(duì)象中,提供了一個(gè)叫json的屬性, 它這里面提供了兩個(gè)方法:
  1. JSON.parse -> 把JSON格式的字符串轉(zhuǎn)換為JSON格式的對(duì)象
  2. JSON.stringify -> 把JSON格式的對(duì)象轉(zhuǎn)換為JSON格式的字符串

var jsonObj = {"name":"lilei","age":17};
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr) // '{"name":"lilei","age":17}'
console.log(JSON.parse(jsonStr))// {name: "lilei", age: 17}

在ie6~7瀏覽器中,我們的window下沒有JSON對(duì)象,剛才的parse和stringify都不存在了

// 把JSON格式的對(duì)象轉(zhuǎn)換為JSON格式的字符串
var str = '{"name":"lilei","age":17}';
JSON.parse(str);
eval("(" + str + ")"); // 使用eval,不要忘記手動(dòng)的加一個(gè)小括號(hào)

json數(shù)據(jù)綁定

• json.html

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    li{
        list-style: none;
    }
    #ul1{
        width: 150px;
        margin: 30px auto;
        padding: 12px;
        border: 1px solid green;
    }
    #ul1 li{
        /*超出文本的自動(dòng)裁切*/
        text-overflow: ellipsis; /*超出文本的以 ... 顯示*/
        white-space: nowrap; /*強(qiáng)制不換行*/
        overflow: hidden; /*溢出隱藏*/
    }
    #ul1 li span{
        display: inline-block;
        width: 28px;
        height: 28px;
        background: red;
        border-radius: 50%;
        line-height: 28px; 
        text-align: center;
        color: #fff;
        margin: 12px 10px 0 0;
    }
</style>
<ul id="ul1">
    <li><span class="bg">01</span>aaaaaaaaaaaaa</li>
    <li><span class="bg">02</span>bbbbbbbbbbbbb</li>
    <li><span class="bg">03</span>ccccccccccccc</li>
</ul>
<script type="text/javascript" src="json.js"></script>

• json.js

var jsonObj = [
    {
        "title":"qqqqqqqqqqqqqq",
        "desc":"q1q1q1q1q1q1q1q1q1q1q1"
    },
    {
        "title":"wwwwwwwwwwwwww",
        "desc":"w2w2w2w2w2w2w2w2w2w2w2"
    },
    {
        "title":"eeeeeeeeeeeeee",
        "desc":"e1e1e1e1e1e1e1e1e1e1e1"
    },
    {
        "title":"rrrrrrrrrrrrrr",
        "desc":"r1r1r1r1r1r1r1r1r1r1r1"
    },
    {
        "title":"tttttttttttttt",
        "desc":"t1t1t1t1t1t1t1t1t1t1t1"
    },
    {
        "title":"yyyyyyyyyyyyyy",
        "desc":"y1y1y1y1y1y1y1y1y1y1y1"
    },
    {
        "title":"uuuuuuuuuuuuuu",
        "desc":"u1u1u1u1u1u1u1u1u1u1u1"
    },
    {
        "title":"iiiiiiiiiiiiii",
        "desc":"i1i1i1i1i1i1i1i1i1i1i1"
    }
]

var oUl = document.getElementById("ul1");
var oLis = oUl.getElementsByTagName("li");

// 鼠標(biāo)移入移出,背景變色
for (var i = 0; i < oLis.length; i++) {
    oLis[i].onmouseover = function (){
        this.style.backgroundColor = 'pink';
    }
    oLis[i].onmouseout = function (){
        this.style.backgroundColor = '';
    }
}

1. 利用動(dòng)態(tài)創(chuàng)建元素節(jié)點(diǎn)和把它追加到頁面中的方式來實(shí)現(xiàn)數(shù)據(jù)綁定
   優(yōu)勢(shì): 把需要?jiǎng)討B(tài)綁定的內(nèi)容一個(gè)個(gè)追加到頁面中,對(duì)原來的元素沒有任何影響
   弊端: 瀏覽器每創(chuàng)建一個(gè)li, 就添加到頁面中,引發(fā)一次DOM回流,最后引發(fā)會(huì)留的次數(shù)過多, 影響我們的性能

for (var i = 0; i < jsonObj.length; i++) {
    var cur = jsonObj[i];
    var oLi = document.createElement("li");
    var num = i+4
    if(num<10){
        num = "0" + num
    }
    oLi.innerHTML = "<span>" + num + "</span>" + cur.title;
    oUl.appendChild(oLi)
}

2. 字符串拼接的方式: 首先循環(huán)需要綁定的數(shù)據(jù), 然后把需要?jiǎng)討B(tài)綁定的標(biāo)簽以字符串的方式拼接到一起,拼接完成后, 最后統(tǒng)一添加到頁面中 ("字符串拼接綁定數(shù)據(jù)是工作中最常用的一種綁定數(shù)據(jù)的方式" -> 模板引擎數(shù)據(jù)綁定 )
   優(yōu)勢(shì): 事先把內(nèi)容拼接好, 最后添加到頁面中, 只引發(fā)一次回流
   弊端: 把新拼接的字符串添加到 #ul1 中,原有的三個(gè)li的鼠標(biāo)滑過效果都消失了(原來標(biāo)簽綁定的時(shí)間都消失了)

var str = "";
for (var i = 0; i < jsonObj.length; i++) {
    var cur = jsonObj[i];
    var num = i+4
    if(num<10){
        num = "0" + num
    }
    str += "<li>";
    str += "<span>" + num + "</span>";
    str += cur.title;
    str += "</li>"
}
// console.log(str);
oUl.innerHTML += str; // -> oUl.innerHTML = oUl.innerHTML + str;
// (把之前的三個(gè) li 以字符串的方式獲取到)+str ; 
// (拼接完成的整體還是字符串, 最后再把字符串統(tǒng)一的添加到頁面中, 瀏覽器還需要把字符串渲染成對(duì)應(yīng)的標(biāo)簽)

3. 文檔碎片

var frg = document.createDocumentFragment();
// 創(chuàng)建一個(gè)文檔碎片, 相當(dāng)于臨時(shí)創(chuàng)建一個(gè)容器

for (var i = 0; i < jsonObj.length; i++) {
    var cur = jsonObj[i];
    var oLi = document.createElement("li");
    var num = i+4
    if(num<10){
        num = "0" + num
    }
    oLi.innerHTML = "<span>" + num + "</span>" + cur.title;
    frg.appendChild(oLi)
}
oUl.appendChild(frg)
frg = null;

js中DOM深入知識(shí):

-> 回流(重排 reflow): 當(dāng)頁面中的結(jié)構(gòu)發(fā)生改變(增加/刪除元素, 位置發(fā)生改變...), 瀏覽器都需要重新的計(jì)算一遍最新的DOM結(jié)構(gòu), 重新的進(jìn)行渲染
-> 重繪:某一個(gè)元素的部分樣式發(fā)生改變了, 瀏覽器只需要重新的渲染當(dāng)前元素即可