回顧
上一篇文章 從封裝函式到實現簡易版自用jQuery (一) 已經介紹瞭如何實現基本功能和封裝成自己的庫，這篇文章著重講對自己 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: 如果傳參是個選擇器該怎麼辦？
解決方案：
加個型別判斷來解決吧！為了讓我們的程式碼更加語義化，傳來的引數由 node 改名為 nodeOrSelector，在函式內再定義一個 node 變數，
如果傳參是選擇器，通過 document.querySelector() 來找到相應的節點，賦值給 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`));
複製程式碼
思考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`))
複製程式碼
var nodeTest2 = simpleTools(`#item3`);
nodeTest2.addClass([`red`]);
console.log(document.querySelectorAll(`#item3`))
複製程式碼
思考3: 想要改變原型鏈怎麼辦？
現在的 nodes 是一個連線著
NodeList.prototype 的物件，我的原型鏈想直接是 Object.prototype， 怎麼辦呢？
解決方案：
藉助一個臨時變數，通過迴圈遍歷得到一個純淨的物件。
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哦。如果是一個節點，也需要把 nodeOrSelector 構造出和上面分支一樣的形式存到 node 物件中。現在無論是多個選擇器還是一個節點，都轉化成了只連結 Object.prototype 的物件。
測試執行：
var nodeTest = simpleTools(`#item3`);
console.log(nodeTest);
複製程式碼
var nodeTest2 = simpleTools(`ul>li`);
console.log(nodeTest2);
複製程式碼
思考4: 設定文字怎麼做？
如果是獲取文字，那麼把 nodes 中每一項的 textContent 存起來。
getText : function(){
var texts = [];
for(var i = 0; i < nodes.length;i++){
texts.push(nodes[i].textContent);
}
return texts;
}
複製程式碼如果是設定文字，通過遍歷，將要設定的文字依次賦值給 textContent 。
setText : function(text){
for(var i = 0; i < nodes.length;i++){
nodes[i].textContent = text;
}
return text;
}
複製程式碼測試執行：
var nodeTest = simpleTools(`#item3`);
nodeTest.setText(`hello`);
複製程式碼
程式碼優化：
無論是設定還是獲取，上面的程式碼看起來是那麼類似，說明這就存在著優化的可能。我們試圖將這兩個函式合併成為一個，如果你有引數傳遞，那麼就說明你是需要設定文字，如果沒有引數傳入，那麼就說明你是想獲取文字。
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 構造出來的，在變數前加上一個 $, 防止變數弄混。
eg：var $node = $(#item3)
關於 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;
};
複製程式碼你喜歡哪種就挑哪種啦
小結
- 擴充了自己的addClass( )方法，不僅可以傳節點，還可以接收選擇器。
- 進一步加深了對原型鏈的瞭解。
快動手試試寫個自己的 API 吧！