一、sort深入
这次我们要完成一个表格排序的案例，那说到排序，最终肯定是归结于数组的排序。对于数组的排序，我们最先想到的肯定是sort方法，所以我们深入了解一下sort。
1.1、基本排序
定义数组：
var ary = [22, 3, 14, 12, 23, 1, 48];
在mdn中对sort的定义如下：
arr.sort(compareFunction)
compareFunction：可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
从mdn的描述中可以看出，如果没有指定一个函数作为参数，那么只能比较10以内的数字，所以一般都会指定一个函数作为参数。
在compareFunction中可以传入两个参数假定为a、b，这两个参数即为待比较多两个数：
- a：每一次执行匿名函数的时候，找到的数组中的当前项；
- b：当前项的后一项
compareFunction的返回值则为一个数字，如果返回值大于0，则让a和b交换一下位置，如果返回值小于等于0，原来的位置不动。
在本例中：
如果：
return a - b，表示升序排序，如果a大于b，返回值大于0，a和b交换位置，输出的结果为：[1, 3, 12, 14, 22, 23, 48]。如果：
return b - a，表示降序排序，如果b大于a，返回值大于0，a和b交换位置，输出的结果为：[48, 23, 22, 14, 12, 3, 1]。
1.2、对象数组（二维数组）排序
定义对象数组：
var ary = [
{name: 'iceman', age: 25},
{name: 'mengzhe', age: 13},
{name: 'shoushou', age: 107},
{name: 'jiajia', age: 256}
];
对象数组的排序，正常情况都是要求根据某个值为数字的属性来排序，在本例中，我们要求以年龄来排序。
sort方法的参数compareFunction的参数中两个参数，并一定就一定是要数字，这两个参数是数组中的某一项，注意是数组中的某一项哦！也就是说在对象数组中，这两个参数代表的是一个对象。在得到了这个结论之后，我们就可以根据通过对象的属性来排序了：
ary.sort(function (a, b) {
return parseFloat(a.age) - parseFloat(b.age);
});
console.log(ary);
二、json
现在与服务端的交互中一般都是使用json，应该基本被使用xml了，我是做Android开发的，在我开始做Android的时候就是使用json，所以json也是现在主流的一种数据交互格式。。
可能很多人会将json归结于一种新的数据类型，其实并不是这样的，json只是一种特殊的数据格式，归根结底json还是对象数据类型的。比如，
普通格式的对象如下：
var obj = {name:'iceman' , age:7};
json格式对象如下：
var jsonObj = {"name":"iceman" , "age":7};
相对于普通格式的对象来说，json对象只是把属性名用双引号包起来了。
在window浏览器对象中，提供了一个叫做JSON的属性（window.JSON），它里面提供了两个方法：
- JSON.parse ：把JSON格式的字符串，转换为JSON格式的对象；
- JSON.stringify ：把JSON格式的对象，转换为JSON格式的字符串；
var jsonObj = {"name":"iceman" , "age":7};
var jsonStr = JSON.stringify(jsonObj); // --> 字符串
console.log(jsonStr);
var str = '{"name":"iceman" , "age":7}';
console.log(JSON.parse(str));
注意： 在IE6~7中，window下没有JSON属性，所以parse和stringify方法都不存在了，那么这时候要把JSON格式的字符串转换为JSON格式的对象可以使用eval方法：
var str = '{"name":"iceman" , "age":7}';
eval("(" + str + ")");
使用eval装好JSON格式的对象，一定要手动加一个小括号。
二、数据绑定
2.1、准备JSON格式的数据
var ary = [
{
"title": "11111",
"desc": "aaaaaaaa"
},
{
"title": "22222",
"desc": "bbbbbbbb"
}
......
];
2.2、页面结构
<ul id="ul1">
<li>原来就有的，这里有鼠标的移入移出事件</li>
</ul>
body, ul, li {margin: 0; padding: 0; list-style: none;}
#ul1 {margin: 10px auto; padding: 10px; width: 300px; border:1px solid #008000; }
#ul1 li {position: relative; padding-left: 28px; height:35px; line-height: 35px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#ul1 li span { display: block; position: absolute; top: 6px; left: 0; width: 21px; height: 21px; line-height: 20px; text-align: center; border: 1px solid #ccc; font-size: 12px; border-radius: 50%; }
寻找元素以及添加移入移出事件：
var oUl = document.getElementById('ul1');
var oLis = oUl.getElementsByTagName('li');
for (var i = 0; i < oLis.length; i++) {
oLis[i].onmouseover = function () {
this.style.backgroundColor = 'pink';
};
oLis[i].onmouseout = function () {
this.style.backgroundColor = '';
};
}
2.3、DOM深入：重绘与回流
回流（也叫重排）：当页面中的HTML结构发生改变（增加、删除元素、位置发生改变...），浏览器都需要重新计算一遍最新的DOM结构，重新对当前的页面进行渲染；
重绘：某一个元素的部分样式发生改变了（背景颜色、字号等），浏览器只需要重新渲染当前页面即可；
2.4、动态创建节点再追加到页面的方式实现数据绑定
for (var i = 0; i < ary.length; i++) {
var cur = ary[i];
var oLi = document.createElement('li');
oLi.innerHTML = '<span>' + i + '</span>' + cur.title + '---' + cur.desc;
oUl.appendChild(oLi);
}
优势： 把需要动态绑定的内容一个个追加到页面中，对原来的元素没有任何的影响；
缺点：每当创建一个li，就添加到页面中，会引发一次DOM回流最后引发回流的次数过多，影响性能。
2.5、字符串拼接的方式实现数据绑定
var str = "";
for (var i = 0; i < ary.length; i++) {
var cur = ary[i];
str += '<li>';
str += '<span>' + i + '</span>';
str += cur.title;
str += '</li>'
}
oUl.innerHTML += str;
首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起，拼接完成最后统一添加到页面中。
拼接完成的整体还是字符串，最后把字符串统一的添加到页面中，浏览器还需要把字符串渲染成最新的标签。
字符串拼接绑定数据，使以后工作中最常用的一种绑定数据的方式，因为所有模板引擎的数据绑定（jade、kTemplate....）以及所有的框架（angular.js、backbone.js....）的原理都是字符串拼接，所以说你可能没有自己直接使用字符串拼接，但是在使用引擎以及框架的过程已经用到了。
** 优势：** 事先把内容拼接好，最后统一添加到页面中，只引发一次回流；
缺点： 把新拼接的字符串添加到#ul1中，原有的三个li的鼠标滑过效果都消失了（原来标签绑定的事件都消失了）。
2.6、文档碎片的方式实现数据绑定
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 + '</span>' + cur.title;
frg.appendChild(oLi);
}
oUl.appendChild(frg);
frg = null;
这种方式解决了以上的问题，但是实际开发中用的很少。
三、表格排序
<ul id="ul1">
<li>98</li>
<li>99</li>
<li>96</li>
<li>95</li>
<li>90</li>
</ul>
var utils = {
listToArray:function (likeAry) {
var ary = [];
try {
ary = Array.prototype.slice.call(likeAry);
} catch (e) {
for (var i = 0; i < likeAry.length; i++) {
ary[ary.length] = likeAry[i];
}
}
return ary;
}
};
var oUl = document.getElementById('ul1');
var oLis = oUl.getElementsByTagName('li');
// 1、先把元素集合类数组转换为数组
var ary = utils.listToArray(oLis);
// 2、给数组进行排序：按照每一个li中的内容大小进行排序
ary.sort(function (a, b) {
return parseFloat(a.innerHTML) - parseFloat(b.innerHTML);
});
// 3、按照ary中存储的最新顺序，依次的把对应的li添加到页面当中
var frg = document.createDocumentFragment();
for (var i = 0; i < ary.length; i++) {
var obj = ary[i];
frg.appendChild(obj);
}
oUl.appendChild(frg);
frg = null;
DOM映射机制：页面中的标签和JavaScript中获取到的元素对象或者元素集合是紧紧绑定在一起的，也中的HTML结构改变了，JS中不需要重新获取，集合里面的内容也会跟着自动改变。
var oUl = document.getElementById('ul1');
var oLis = oUl.getElementsByTagName('li');
console.log(oLis.length); // 5
var oLi = document.createElement('li');
oUl.appendChild(oLi);
console.log(oLis.length); // 6，没有重新的获取，但是oLis这个集合中的长度和内容会自动跟着发生改变
个人公众号（icemanFE）：分享更多的前端技术和生活感悟
