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