前言：众所周知，原生JS的DOM API大多都是很难用的，而在十二年前，已经有了一个很实用的库，它封装了很多好用的方法，让JavaScript更有易用性，如今全世界至少70%的网站都在使用，这个库就是jQuery。为了更容易理解jQuery的实现过程，这篇文章将用原生JS实现jQuery的元素选择、添加类、获取/设置文字这几个方法，当然jQuery的实际实现比这个要复杂的多，本文不做深入研究。
1、实现元素选择
- 首先我们需要认识到的是，jQuery实际上就是一个函数，所以最基本的结构应该是这样的：
1
2
3
4
5
|
windos.jQuery = function(){
}
window.$ = window.jQuery // 实现类jQuery写法 $()
|
- 其次我们需要判断通过该函数传进来的参数是选择器还是DOM节点：是选择器的话，需要使用
document.querySelectorAll()来获取元素，然后返回一个对象用来后续的操作；如果是DOM节点，为了保持操作的一致，也需要将其变为一个对象；如果先用一个变量获取DOM的集合，再将其以参数传入，也会返回一个对象（var boxes = document.getElementsByTagName('div') ，再将boxes传入，进入最后一个分支）。具体代码如下：
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
28
|
window.jQuery = function(nodeOrSelector){
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
}
}
// 传入参数为DOM节点集合
else{
for(let i = 0;i<nodeOrSelector.length;i++){
nodes[i] = nodeOrSelector[i]
}
nodes['length'] = nodeOrSelector.length
}
return nodes
}
|
2、实现获取/设置元素的文本
封装一个Text()函数，操作的是转化过的nodes对象，如果不传参，则获取元素的文本，如果传参（参数需要是字符串），设置元素的文本为所传的参数（其中，如果元素是多个节点的集合，那么会为所有的元素都设置文本）。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
nodes.Text = function(text){
if(text === undefined){
let texts = []
for(let i = 0;i<nodes.length;i++){
texts[i] = nodes[i].textContent
}
return texts
}else{
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
|
3、实现为元素添加/删除类
封装一个addClass()函数，操作的转化过的nodes对象，传入的参数需要是一个对象，对象的键名是需要操作的类，对象的键值是操作类型（如{'red':true,'green':false} 表示添加类名为red的类，同时删除类名为green的类）
- 首先使用
for in循环遍历传入的参数，然后使用for循环遍历nodes节点，对每一个元素都要进行操作，判断键值是true还是false，前者则添加类，后者则删除类：
1
2
3
4
5
6
7
8
9
10
11
|
nodes.addClass = function(classes){
for(let key in classes){
for(let i = 0;i<nodes.length;i++){
if(classes[key]){
nodes[i].classList.add(key)
}else{
nodes[i].classList.remove(key)
}
}
}
}
|
观察上面的代码，发现关于if判断语句中的两个分支有相似的地方，而只要有相似的代码，就有优化的空间，所以进行下面的优化：
1
2
3
4
5
6
7
8
|
nodes.addClass = function(classes){
for(let key in classes){
for(let i = 0;i<nodes.length;i++){
let methodName = classes[key] ? 'add' : 'remove'
nodes[i].classList[methodName](key)
}
}
}
|
4、完整代码
代码链接
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
window.jQuery = function(nodeOrSelector) {
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
console.log(1)
} else if (nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
console.log(2)
} else {
for (let i = 0; i < nodeOrSelector.length; i++) {
nodes[i] = nodeOrSelector[i]
}
nodes['length'] = nodeOrSelector.length
console.log(3)
}
nodes.Text = function(text) {
if (text === undefined) {
let texts = []
for (let i = 0; i < nodes.length; i++) {
texts[i] = nodes[i].textContent
}
return texts
} else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
}
nodes.addClass = function(classes) {
for (let key in classes) {
for (let i = 0; i < nodes.length; i++) {
let methodName = classes[key] ? 'add' : 'remove'
nodes[i].classList[methodName](key)
}
}
}
return nodes
}
window.$ = window.jQuery
|