JavaScript--sort深入了解，以及json初接触

Json及其操作

JSON不是一个单独的数据类型，是一种特殊的数据格式->对象数据类型

相对于普通的格式来说，只是把属性名用双引号包起来

var obj = {name:'珠峰',age : 7};//普通格式的对象

var jsonObj = {"name":'珠峰',"age":7};//json格式的对象

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

• JSON.parse ->把JSON格式的字符串转换为JSON格式的对象
• JSON.stringify ->把JSON格式的对象转换为字符串

在IE6~7中，window下没有JSON对象，所以parse , stringify都不存在了

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

var obj = {name:'珠峰',age : 7}

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

数据绑定

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

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

}

优势：把需要动态绑定的内容一个个的追加到页面中，对原来的元素没有任何的影响

弊端：每当创建一个li，添加到页面中，就引发一次DOM回流，引发回流次数过多，导致性能差

• 字符串拼接的方式：首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起，拼接完成后，统一添加到页面中

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中，原有的三个li的鼠标滑过效果都消失了（原来标签绑定的事件消失了）

优势：事先把内容拼接好，最后统一添加到页面中，只引发一次回流

JS中DOM深入知识

• 回流（重排reflow）：当页面中的HTML结构发生改变（增加，删除元素；为止发生改变等…）浏览器都需要重新计算一遍最新的DOM结构，重新对当前的页面进行渲染
• 重绘：某一个元素的部分样式发生改变了，浏览器只需要重新的渲染成当前的元素
• 文档碎片

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.appenfChild(frg);

frg = null;

DOM映射机制

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