摘要：最近在学习的表格排序，没想到看不起眼的表格排序实际上却暗含了众多知识点。二实现表格排序使用获取数据之所以使用动态获取数据，是为了使用文档碎片绑定数据。
最近在学习js的表格排序，没想到看不起眼的表格排序实际上却暗含了众多JS知识点。在这里记录一下此次学习过程。希望对大家也有所帮助。
完整的表格排序涉及了下列这些知识点：
call方法使用
sort方法深入
数据绑定
DOM映射
下面详细的总结一下这些知识点，最后结合这些知识点实现下面这样一个表格排序案例。
完整的案例源码：https://github.com/daweihe/JS...
一、知识点总结 1、call方法使用call方法的作用是改变方法中的this指向。
call这个方法是定义在Function.prototype的方法。我们定义的任何一个函数都可以认为它是Function这个类的一个实例。那么就可以通过实例的__proto__属性找到所属类的原型。任何一个函数都可以调用call和apply等方法。
先来看一个例子：
var obj = {
name : "JS"
}
function testCall () {
console.log(this);
}
testCall.call( obj ); // {name: "JS"}
首先函数testCall通过原型链查找机制找到call方法执行，call方法在执行过程中把调用call方法这个函数实例中的this都改变成call的第一个参数，接下来调用call方法的这个实例函数执行。
看两个题目：
function fn1() {
console.log(1);
console.log(this);
}
function fn2() {
console.log(2);
console.log(this);
}
fn1.call(fn2); //this -> fn2
fn1.call.call(fn2); //这里的call是改变function.__proto__.call的call方法中的this，相当于执行参数
call方法在执行的时候，call方法的第一个参数是用来改变this的，而从第二个参数开始都是传给调用call的函数的参数。
在非严格模式下，给call方法不传递参数、或者传递null、undefined后，this都是指向window。
sum.call(); //window sum.call(null); //window sum.call(undefined); //window
严格模式下call执行的时候和非严格模式不同：
sum.call(); //undefined sum.call(null); //null sum.call(undefined); //undefined
下面使用call方法实现一个类数组转换为数组的方法：
function listToArray (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;
}
和call类似的方法还有apply和bind方法，这里简单总结一下。
apply方法的作用和call方法一模一样，只是传参的形式不太一样，apply将函数的参数用数组包裹起来：
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
sum.apply(null,[100,200]);
bind方法同样也是用来改变this关键字的，但是它只是仅仅改变this指向，不立即执行调用this的函数。
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
var obj = {name : "zx"}
var temp = sum.bind(obj); //temp已经是被改变了this的函数
temp(100,200); //当我们需要的时候才执行
//或者像这样处理
var temp = sum.bind(null, 100, 200);
temp();
bind方法体现了js中的预处理思想。
2、 sort排序深入我们知道数组的sort方法只能排序10以内的数组。如果需要排序的数组中存在大于10的数字，我们就需要向sort方法中传入回调函数，常见的是这样：
ary.sort(function (a,b) {
return a - b;
});
这样就能实现数组的升序排序。那么这样排序的原理到底是什么呢？
对于传入的两个参数：a代表的是找到的数组中的当前项，b代表的是当前项的后一项。
return a -b ： 如果a大于b，返回结果，a与b交换位置。如果a小于b，那么a和b位置不变。 这是升序排序
return b -a ： 如果b大于a，返回结果，a与b交换位置。如果a小于b，那么a和b位置不变。 这是降序排序
了解了基本原理后，对于这样一个二维数组，如何实现按年龄排序？
var persons = [{
name:"dawei",
age:55
},{
name:"ahung",
age:3
},{
name:"maomi",
age:2
},{
name:"heizi",
age:78
},{
name:"afu",
age:32
}];
其实很简单：
ary.sort(function(a,b){
return a.age - b.age;
});
如果按姓名排序，则要涉及字符串的localeCompare()方法：
ary.sort(function(a,b){
return a.name.localeCompare(b.name);
});
name.localeCompare()这个方法会根据两个字符串的字母进行比较，如果前一个字符串的第一个字母在24个英文字母中出现的位置比后一个字符串的第一个字符出现的位置靠前，则认定第一个字符串小，返回-1。如果出现的位置靠后，则认定第一个字符串大，返回1。如果所比较的字符相等。则比较下一个字符。
这个方法很实用，常用于按姓氏排序，对于汉字，该方法会自动将汉字转换为汉语拼音进行比较。
3、数据绑定在js中一般使用动态绑定或者拼接字符串的方式实现数据绑定。
动态绑定：
//ary为需要添加到页面中的数据数组
var oDiv = document.getElementById("box");//获取容器
var myUl = oDiv.getElementsByTagName("ul")[0];//获取列表
var arrLength = ary.length;
for (var i = 0;i < arrLength ; i ++)
{ //动态创建元素
var oli = document.createElement("li");
oli.innerHTML = "" + (i + 5) + "" + ary[i].title;
myUl.appendChild(oli);//动态添加元素
}
每添加一次就会引起一次DOM回流，如果数据量过大，这样则会严重影响性能。
关于DOM的回流与重绘，推荐大家看一下这篇文章：http://www.css88.com/archives...
拼接字符串：
