回顧
上一篇文章 從封裝函數(shù)到實現(xiàn)簡易版自用jQuery (一) 已經(jīng)介紹了如何實現(xiàn)基本功能和封裝成自己的庫，這篇文章著重講對自己 API 功能的拓展，使其更強大。
以下是基于第一篇文章，在本次練習中要用到的代碼，以 addClass( ) 為例進行拓展。
<ul>
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
<li id="item4">item4</li>
<li id="item5">item5</li>
</ul>
.red{
color:red;
}
window.simpleTools = function(node){
return{
addClass:function(classes){
classes.forEach((value) =>
node.classList.add(value));
}
};
};
思考1: 如果傳參是個選擇器該怎么辦？
解決方案：
加個類型判斷來解決吧！為了讓我們的代碼更加語義化，傳來的參數(shù)由 node 改名為 nodeOrSelector，在函數(shù)內(nèi)再定義一個 node 變量，
如果傳參是選擇器，通過 document.querySelector() 來找到相應的節(jié)點，賦值給 node；
如果傳參不是選擇器，直接賦值給 node 存起來。
var node;
if(typeof nodeOrSelector === 'string'){
node = document.querySelector(nodeOrSelector);
}else{
node = nodeOrSelector;
}
測試運行：
var nodeTest = simpleTools('#item3');
nodeTest.addClass(['red']);
console.log(document.querySelectorAll('#item3'));
image
思考2：如果傳參是多個選擇器該怎么辦？
解決方案：
- 把
document.querySelector( )改成document.querySelectorAll( ),
此時變量 node 變成 nodes 對象。 - 遍歷 nodes ，依次加上 red 效果
window.simpleTools = function(nodeOrSelector){
var nodes = {};
if(typeof nodeOrSelector === 'string'){
nodes = document.querySelectorAll(nodeOrSelector);
}else{
nodes = nodeOrSelector;
}
return{
addClass:function(classes){
classes.forEach((value) =>{
for(var i = 0;i < nodes.length;i++){
nodes[i].classList.add(value);
}
});
}
};
};
測試運行：
var nodeTest = simpleTools('ul>li');
nodeTest.addClass(['red']);
console.log(document.querySelectorAll('ul>li'))
image
var nodeTest2 = simpleTools('#item3');
nodeTest2.addClass(['red']);
console.log(document.querySelectorAll('#item3'))
image
思考3: 想要改變原型鏈怎么辦？
現(xiàn)在的 nodes 是一個連接著
NodeList.prototype 的對象，我的原型鏈想直接是 Object.prototype， 怎么辦呢？
解決方案：
借助一個臨時變量，通過循環(huán)遍歷得到一個純凈的對象。
window.simpleTools = function(nodeOrSelector){
var nodes = {};
if(typeof nodeOrSelector === 'string'){
var temp = document.querySelectorAll(nodeOrSelector);
for(var i =0 ;i<temp.length;i++){
nodes[i] = temp[i];
}
nodes.length = temp.length;
}else if(nodeOrSelector instanceof Node){
nodes = {
0 :nodeOrSelector,
length :1
};
}
return nodes; // 只看nodes的變化，暫時先忽略addClass( )方法
};
如果是多個選擇器，遍歷并存儲，不要忘記了nodes.length哦。如果是一個節(jié)點，也需要把 nodeOrSelector 構(gòu)造出和上面分支一樣的形式存到 node 對象中?，F(xiàn)在無論是多個選擇器還是一個節(jié)點，都轉(zhuǎn)化成了只鏈接 Object.prototype 的對象。
測試運行：
var nodeTest = simpleTools('#item3');
console.log(nodeTest);
image
var nodeTest2 = simpleTools('ul>li');
console.log(nodeTest2);
image
思考4: 設(shè)置文字怎么做？
如果是獲取文字，那么把 nodes 中每一項的 textContent 存起來。
getText : function(){
var texts = [];
for(var i = 0; i < nodes.length;i++){
texts.push(nodes[i].textContent);
}
return texts;
}
如果是設(shè)置文字，通過遍歷，將要設(shè)置的文字依次賦值給 textContent 。
setText : function(text){
for(var i = 0; i < nodes.length;i++){
nodes[i].textContent = text;
}
return text;
}
測試運行：
image
var nodeTest = simpleTools('#item3');
nodeTest.setText('hello');
image
代碼優(yōu)化：
無論是設(shè)置還是獲取，上面的代碼看起來是那么類似，說明這就存在著優(yōu)化的可能。我們試圖將這兩個函數(shù)合并成為一個，如果你有參數(shù)傳遞，那么就說明你是需要設(shè)置文本，如果沒有參數(shù)傳入，那么就說明你是想獲取文本。
text: function (text) {
if (text == undefined) {
var texts = [];
for (var i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent);
}
return texts;
}
else {
for (var i = 0; i < nodes.length; i++) {
nodes[i].textContent = text;
}
}
}
再給個 alias 吧
window.$ = function simpleTools(){...}
使用全局變量 $ 就相當于在用 simpleTools。
tips:
如果某變量是由 jQuery 構(gòu)造出來的，在變量前加上一個 $, 防止變量弄混。
eg：var $node = $(#item3)
關(guān)于 return 的兩種形式
第一種
window.$ = function simpleTools(nodeOrSelector) {
var nodes = {};
if (typeof nodeOrSelector === 'string') {
var temp = document.querySelectorAll(nodeOrSelector);
for (var i = 0; i < temp.length; i++) {
nodes[i] = temp[i];
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node) {
nodes = {
0 : nodeOrSelector,
length: 1
};
}
return {
addClass: function(classes) {
classes.forEach((value) =>{
for (var i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value);
}
});
},
text: function(text) {
if (text == undefined) {
var texts = [];
for (var i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent);
}
return texts;
} else {
for (var i = 0; i < nodes.length; i++) {
nodes[i].textContent = text;
}
}
}
};
};
第二種
window.$ = function simpleTools(nodeOrSelector) {
var nodes = {};
if (typeof nodeOrSelector === 'string') {
var temp = document.querySelectorAll(nodeOrSelector);
for (var i = 0; i < temp.length; i++) {
nodes[i] = temp[i];
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node) {
nodes = {
0 : nodeOrSelector,
length: 1
};
}
nodes.addClass = function(classes) {
classes.forEach((value) =>{
for (var i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value);
}
});
};
nodes.text = function(text) {
if (text == undefined) {
var texts = [];
for (var i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent);
}
return texts;
} else {
for (var i = 0; i < nodes.length; i++) {
nodes[i].textContent = text;
}
}
};
return nodes;
};
你喜歡哪種就挑哪種啦
小結(jié)
- 拓展了自己的addClass( )方法，不僅可以傳節(jié)點，還可以接收選擇器。
- 進一步加深了對原型鏈的了解。
快動手試試寫個自己的 API 吧！
