jQuery API
1 | window.jQuery = ??? |
实现上述API
分析: 显而易见,$
是一个函数,它可以接收一个 CSS 选择器字符串参数,然后返回一个包含了选择器对应元素的对象(按照CSS选择器规则所能选中的元素),这个对象具有addClass
和setText
方法。
jQuery是全局可调用的,可以将其声明为全局变量或直接将其作为 window对象的属性,并赋值为一个函数,这个函数接收一个 CSS 选择器字符串参数。
1
2
3window.jQuery = function (selector){
// 函数体...
}在函数体中,首先要实现的功能就是根据选择器找到对应的元素,可以使用
window.querySelectorAll
方法实现。1
let elements = windown.querySelectorAll(selector) //根据传入的CSS选择器找到对应元素
由于我们要返回的是一个包含了选择器选中的各个元素的对象,接下来先声明一个空对象,然后遍历
elements
NodeList,将每一个元素依次放入这个空对象。1
2
3
4
5
6
7let temp = {}
let length = elements.length
for (let i=0;i<length;i++){
temp[i] = elements[i]
}
temp.length = length现在我们已经得到了一个包含了选择器对应的各个元素的对象
temp
,是时候给它添加addClass
和setText
方法了。1
2
3
4
5
6
7
8
9
10
11
12// addClass 方法,给temp对象中包含的每一个元素对象都增加一个class
temp.addClass = function (className){
for (let i=0;i<temp.length;i++){
temp[i].classList.add(className) //遍历temp对象,得到其中的各个元素后使用 DOM API 添加类
}
}
// setText 方法,给temp对象中包含的每一个元素对象都设置一段文本
temp.setText = function (text){
for (let i=0;i<temp.length;i++){
temp[i].textContent = text
}
}至此,temp对象中已经包含了选择器对应的各个元素,并且拥有了两个方法可以对它拥有的各个元素进行相应操作,只需把temp返回即可。
1
return temp
完整的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28windown.jQuery = function (selector){
//根据传入的CSS选择器找到对应元素
let elements = windown.querySelectorAll(selector)
//创建用于存放各个元素的空对象
let temp = {}
let length = elements.length
//遍历NodeList,将各个元素放入temp对象
for (let i=0;i<length;i++){
temp[i] = elements[i]
}
temp.length = length
// addClass 方法,给temp对象中包含的每一个元素对象都增加一个class
temp.addClass = function (className){
for (let i=0;i<temp.length;i++){
temp[i].classList.add(className) //遍历temp对象,得到其中的各个元素后使用 DOM API 添加类
}
}
// setText 方法,给temp对象中包含的每一个元素对象都设置一段文本
temp.setText = function (text){
for (let i=0;i<temp.length;i++){
temp[i].textContent = text
}
}
//将temp对象返回
return temp
}
// 将jQuery函数赋值给$,就可以使用简称"$"。
window.$ = windown.jQuery
总结改进
通过这样的一系列封装,实现了类似jQuery选择器的功能,初步了解了jQuery背后的原理。同时发现这种实现的方法每次返回的temp对象的那两个方法都是temp的实例方法,都会各自占用内存而没有共享方法。我觉得可以定义一个Temp构造函数,这两个方法都定义在Temp函数的原型上,然后每次调用$
时不是新建一个空对象temp,而是实例化一个Temp对象,再将各个元素依次放入。
改进后的代码
1 | windown.jQuery = function (selector){ |