1. jQuery函数结构
jQuery函数要方便与输入一个选择器参数或则节点正确返回一个伪数组,便于对其明确执行后续方法,jQuery函数结构即为自身的hash结构,所以实现一个新的jQuery结构函数可以由如下图标号1所指的选择器、标号2所指的函数方法、标号3所返回的最终转换好的jQuery对象组成,后续为介绍。
2. 实现jQuery的API之选择器
对于标号1部分,对于节点和选择器的参数都可返回所需要的伪数组对象的index-value以及length-value的hash。
let nodes = {}
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)
for (let i = 0;i< temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1
}
}
3. 实现jQuery的API之函数对象的方法
对于标号2部分,添加所需的jQuery函数方法,如标号2.1的addClass()方法,以及标号2.2的setText()方法。
nodes.addClass = function(classes){
[classes].forEach( (value) => {
for (let i = 0;i < nodes.length;i++) {
nodes[i].classList.add(value)
}
})
}
nodes.setText = function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes
}
4. 返回jQuery对象
在标号3为最终返回的jQuery对象,该对象包含标号1和2的hash,该对象的引用地址将被赋值给window.jQuery。
5. jQuery的API使用
对于window.jQuery的调用,使用$的标识符命名jQuery对象。
window.$ = jQuery
var $div = $('div')//声明对应的jQuery对象
$div.addClass('red')
$div.setText('hi')