資訊專欄INFORMATION COLUMN
摘要：最近在學習的表格排序，沒想到看不起眼的表格排序實際上卻暗含了眾多知識點。二實現表格排序使用獲取數據之所以使用動態獲取數據，是為了使用文檔碎片綁定數據。
最近在學習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...
拼接字符串：
