初探jquery 实现过程
2019-12-18 本文已影响0人
饥人谷_小霾
window.jQuery = function(xx){
let nodes = {} //新建一个伪数组 获得函数即将操作的对象
//分析接收到的节点或选择器
if (typeof xx === 'string') {
let temp
temp = document.querySelectorAll(xx)
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]
}
nodes.length = temp.length
} else if (xx instanceof Node) {
nodes = { //以哈希形式返回
0: xx,
length: 1
}
}
nodes.addClass = function (classes) {/*实现这个内部函数功能*/
classes.forEach((value) => {
for (let k = 0; k < nodes.length; k++) {
nodes[k].classList.add(value)
}
})
}
nodes.text = function (text) { /*实现这个内部函数功能*/
if (text === undefined) {
var texts = []
for (let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
return texts
} else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
代码实现细节:
- 声明一个伪数组
- 判断传入的参数是节点还是字符串,若是字符串则用querySelectorAll()方法获取,若是节点则以哈希形式存储在声明的伪数组中
- 以闭包形式封装功能函数