資訊專欄INFORMATION COLUMN
摘要：最近在學(xué)習(xí)的表格排序，沒想到看不起眼的表格排序?qū)嶋H上卻暗含了眾多知識點。二實現(xiàn)表格排序使用獲取數(shù)據(jù)之所以使用動態(tài)獲取數(shù)據(jù)，是為了使用文檔碎片綁定數(shù)據(jù)。
最近在學(xué)習(xí)js的表格排序，沒想到看不起眼的表格排序?qū)嶋H上卻暗含了眾多JS知識點。在這里記錄一下此次學(xué)習(xí)過程。希望對大家也有所幫助。
完整的表格排序涉及了下列這些知識點：
call方法使用
sort方法深入
數(shù)據(jù)綁定
DOM映射
下面詳細(xì)的總結(jié)一下這些知識點，最后結(jié)合這些知識點實現(xiàn)下面這樣一個表格排序案例。
完整的案例源碼：https://github.com/daweihe/JS...
一、知識點總結(jié) 1、call方法使用call方法的作用是改變方法中的this指向。
call這個方法是定義在Function.prototype的方法。我們定義的任何一個函數(shù)都可以認(rèn)為它是Function這個類的一個實例。那么就可以通過實例的__proto__屬性找到所屬類的原型。任何一個函數(shù)都可以調(diào)用call和apply等方法。
先來看一個例子：
var obj = {
name : "JS"
}
function testCall () {
console.log(this);
}
testCall.call( obj ); // {name: "JS"}
首先函數(shù)testCall通過原型鏈查找機制找到call方法執(zhí)行，call方法在執(zhí)行過程中把調(diào)用call方法這個函數(shù)實例中的this都改變成call的第一個參數(shù)，接下來調(diào)用call方法的這個實例函數(shù)執(zhí)行。
看兩個題目：
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，相當(dāng)于執(zhí)行參數(shù)
call方法在執(zhí)行的時候，call方法的第一個參數(shù)是用來改變this的，而從第二個參數(shù)開始都是傳給調(diào)用call的函數(shù)的參數(shù)。
在非嚴(yán)格模式下，給call方法不傳遞參數(shù)、或者傳遞null、undefined后，this都是指向window。
sum.call(); //window sum.call(null); //window sum.call(undefined); //window
嚴(yán)格模式下call執(zhí)行的時候和非嚴(yán)格模式不同：
sum.call(); //undefined sum.call(null); //null sum.call(undefined); //undefined
下面使用call方法實現(xiàn)一個類數(shù)組轉(zhuǎn)換為數(shù)組的方法：
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方法，這里簡單總結(jié)一下。
apply方法的作用和call方法一模一樣，只是傳參的形式不太一樣，apply將函數(shù)的參數(shù)用數(shù)組包裹起來：
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
sum.apply(null,[100,200]);
bind方法同樣也是用來改變this關(guān)鍵字的，但是它只是僅僅改變this指向，不立即執(zhí)行調(diào)用this的函數(shù)。
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
var obj = {name : "zx"}
var temp = sum.bind(obj); //temp已經(jīng)是被改變了this的函數(shù)
temp(100,200); //當(dāng)我們需要的時候才執(zhí)行
//或者像這樣處理
var temp = sum.bind(null, 100, 200);
temp();
bind方法體現(xiàn)了js中的預(yù)處理思想。
2、 sort排序深入我們知道數(shù)組的sort方法只能排序10以內(nèi)的數(shù)組。如果需要排序的數(shù)組中存在大于10的數(shù)字，我們就需要向sort方法中傳入回調(diào)函數(shù)，常見的是這樣：
ary.sort(function (a,b) {
return a - b;
});
這樣就能實現(xiàn)數(shù)組的升序排序。那么這樣排序的原理到底是什么呢？
對于傳入的兩個參數(shù)：a代表的是找到的數(shù)組中的當(dāng)前項，b代表的是當(dāng)前項的后一項。
return a -b ： 如果a大于b，返回結(jié)果，a與b交換位置。如果a小于b，那么a和b位置不變。 這是升序排序
return b -a ： 如果b大于a，返回結(jié)果，a與b交換位置。如果a小于b，那么a和b位置不變。 這是降序排序
了解了基本原理后，對于這樣一個二維數(shù)組，如何實現(xiàn)按年齡排序？
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()這個方法會根據(jù)兩個字符串的字母進(jìn)行比較，如果前一個字符串的第一個字母在24個英文字母中出現(xiàn)的位置比后一個字符串的第一個字符出現(xiàn)的位置靠前，則認(rèn)定第一個字符串小，返回-1。如果出現(xiàn)的位置靠后，則認(rèn)定第一個字符串大，返回1。如果所比較的字符相等。則比較下一個字符。
這個方法很實用，常用于按姓氏排序，對于漢字，該方法會自動將漢字轉(zhuǎn)換為漢語拼音進(jìn)行比較。
3、數(shù)據(jù)綁定在js中一般使用動態(tài)綁定或者拼接字符串的方式實現(xiàn)數(shù)據(jù)綁定。
動態(tài)綁定：
//ary為需要添加到頁面中的數(shù)據(jù)數(shù)組
var oDiv = document.getElementById("box");//獲取容器
var myUl = oDiv.getElementsByTagName("ul")[0];//獲取列表
var arrLength = ary.length;
for (var i = 0;i < arrLength ; i ++)
{ //動態(tài)創(chuàng)建元素
var oli = document.createElement("li");
oli.innerHTML = "" + (i + 5) + "" + ary[i].title;
myUl.appendChild(oli);//動態(tài)添加元素
}
每添加一次就會引起一次DOM回流，如果數(shù)據(jù)量過大，這樣則會嚴(yán)重影響性能。
關(guān)于DOM的回流與重繪，推薦大家看一下這篇文章：http://www.css88.com/archives...
拼接字符串：
