今天开始学习jQuery,理解其实现模式和大体思想,然后自己简单实现一些类jQuery功能,这样能更好地学习使用它。直接看代码,实现细节将以注释形式讲解。
window.jQuery = function (nodeOrSelector) { // 添加全局函数,返回一个伪数组(hash)
var nodes = {};
if (typeof nodeOrSelector === 'string') {
// 检测传入类型,如果是字符串则是一个css选择器,遂使用querySelectorAll
var temp = document.querySelectorAll(nodeOrSelector); // 返回伪数组
for (let i = 0; i < temp.length; i++) {
// 遍历伪数组并将其加入nodes,添加length属性
nodes[i] = temp[i];
nodes.length = temp.length;
}
} else if (nodeOrSelector instanceof Node) {
// 检测是否是一个元素节点 ,同样将其组织成伪数组形式
nodes = {
0: nodeOrSelector,
length: 1
}
}
// 为nodes添加方法,这样在返回nodes后就可以直接使用nodes.xxx的形式调用方法
nodes.addClass = function (c) {
for (let i = 0; i < nodes.length; i++) {
// 遍历nodes,为其中的每个元素添加class
nodes[i].classList.add(c);
}
}
nodes.setText = function (text) {
// 设置文本,改变元素的显示文本,同样使用遍历的方法
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text;
}
}
return nodes;
}
window.$ = jQuery; // 将jQuery改名为$,方便调用
以上是jQuery实现的大体形式,这只是一个极简版,主要在于体会其设计思想,真正的jQuery实现过程自然是要复杂的多。