$("#div1").addClass("red")
要想實(shí)現(xiàn)jQuery這種$() //jQuery()包裹一個(gè)選擇器就可以找到目標(biāo)Nodes很簡(jiǎn)單，只需要讓我們的構(gòu)造函數(shù)返回一個(gè)新的我們包裝過的Node就可以了赃蛛。
var myQuery = function(node){
let Node;
doSomething(node);
return Node;
}
這樣當(dāng)我們調(diào)用myQuery(something)就是返回跟something相關(guān)的node了。
當(dāng)我們希望myQuery對(duì)象具有更語義化的功能本讥，例如
myQuery("#div1").addClass();
希望通過調(diào)用myQuery找到節(jié)點(diǎn)后用.調(diào)用方法氓英。
我們只需要在myQuery構(gòu)造函數(shù)中返回的對(duì)象里添加function就可以了镊折。
window.myQuery = function(node){
return {
fun1 : function(pars){}
}
}
這樣就可以返回一個(gè)帶有自定義方法的對(duì)象了。
現(xiàn)在將上面兩個(gè)用法結(jié)合一下秋秤。
window.myQuery = function(Node){
let node = {
addClass: function (classes) {
for (let i=0; i<node.length; i++){
node[i].classList.add(classes)
}
},
setText: function (text) {
for (let i = 0; i < node.length; i++) {
node[i].innerHTML = text;
}
}
};
//字符串類型選擇器
if(typeof Node === "string"){
let nodes = window.document.querySelectorAll(Node);
for (let i=0; i<nodes.length; i++){
node[i] = nodes[i]
}
node["length"] = nodes.length;
}
// DOM節(jié)點(diǎn)
else if(Node instanceof window.Node){
node = {
0 : Node,
length : 1
}
}
return node;
}
window.$$ = myQuery
myQuery的構(gòu)造函數(shù)利用閉包來判斷傳入的是一個(gè)string類型選擇器還是DOM的Node類型宏粤，以返回不同長度的偽數(shù)組。
這樣返回的一個(gè)myQuery對(duì)象灼卢，就保存了一個(gè)或多個(gè)標(biāo)簽節(jié)點(diǎn)绍哎，這時(shí)只需要調(diào)用這個(gè)對(duì)象的addClass()就可以給每個(gè)節(jié)點(diǎn)添加類了。
最后再給myQuery一個(gè)鉤子鞋真。
window.$$ = myQuery;
$$("#div1").addClass("active");
這樣就可以很輕松的找到目標(biāo)并且做一些事情了崇堰。
