----------------------------------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的特点
网友评论