<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></head>
<body>
<div>1</div>
<div>2</div>
<p>3</p>
<p>4</p>
</body>
</html>
上面是一個簡單的html頁面，現(xiàn)在我們要用原生的javascript來操作
- 1.獲取所有div，并改變所有div的背景
- 2.獲取所有p標(biāo)簽，并改變p標(biāo)簽的背景
var divs = document.getElementsByTagName('div');
var ps = document.getElementsByTagName('p');
for (var i = 0; i < divs.length ; i++) {
divs[i].style.backgroundColor = 'red';
}
for (var l = 0; l < ps.length ; l++) {
ps[l].style.backgroundColor = 'blue';
}
這樣寫可以達到滿足要求，但是代碼冗余，所以我們要進行方法的封裝。（首先封裝獲取dom的方法）
var _gT = function(tag){
return document.getElementsByTagName(tag);
};
var divs = _gT('div');
var ps = _gT('p');
for (var i = 0; i < divs.length ; i++) {
divs[i].style.backgroundColor = 'red';
}
for (var l = 0; l < ps.length ; l++) {
ps[l].style.backgroundColor = 'blue';
}
首先我們分析，寫了2個for循環(huán)，是否可以把for循環(huán)也封裝起來。
var _gT = function(tag){
return document.getElementsByTagName(tag);
};
var divs = _gT('div');
var ps = _gT('p');
var _each = function(arr, color){
for (var i = 0; i < arr.length; i++) {
arr[i].style.backgroundColor = color;
}
};
_each(divs, 'red');
_each(ps, 'blue');
封裝完成，但是還有問題，那如果我不想改變背景顏色了，我要改成背景圖片，這個時候怎么寫呢？（繼續(xù)在 _each 的方法里加？當(dāng)然不行?。?/p>
var _gT = function(tag){
return document.getElementsByTagName(tag);
};
var _each = function(arr, fn){
for (var i = 0; i < arr.length; i++) {
fn(i, arr[i]);
}
};
var divs = _gT('div');
var ps = _gT('p');
_each(divs, function(i, v){
v.style.backgroundColor = 'red';
});
_each(ps, function(i, v){
v.style.backgroundColor = 'blue';
});
這樣就結(jié)束了嗎，當(dāng)然沒有，上面的代碼中，獲取dom的方法和循環(huán)的each方法我們都調(diào)用了2次，還可以繼續(xù)優(yōu)化？（很明顯是可以的。）隱式迭代
var _gT = function(tag, results){
results = results || [];
//將獲取的每一個元素保存到新數(shù)組中，若不使用 apply 則一個 tag 下面的所有標(biāo)簽只會保存最后一個到新的結(jié)果數(shù)組中
results.push.apply(results, document.getElementsByTagName(tag));
return results;
};
var _each = function(arr, fn){
for (var i = 0; i < arr.length; i++) {
//返回當(dāng)前對象,定義跳出 for 循環(huán)的規(guī)則（在數(shù)組[1,2,3,4,3]中查找3若不使用break，則會一直查找到最后一個元素才會結(jié)束，使用break后，發(fā)現(xiàn)滿足條件立刻終止循環(huán)）
if(fn.call(arr[i], i, arr[i]) === false){
break;
};
//若按照下面的這種寫法，在each的方法里中打印 this 會得到 window 對象。
/*
if(fn(i, arr[i]) === false){
break;
};*/
}
};
_each(_gT('div', _gT('p')), function(){
console.log(this);
this.style.backgroundColor = 'red';
});
總結(jié)：之前學(xué)js一直都是用的jquery庫，從來都沒有仔細考慮過著里面到底是怎么實現(xiàn)的，現(xiàn)在回過頭來學(xué)習(xí)，發(fā)現(xiàn)這里面的代碼也是可以千變?nèi)f化的，受益頗多。
