本篇文章将介绍如何使用浏览器提供的原生DOM API来实现jQuery的两个实用的API。
通过了解DOM API，我们可以知道，浏览器给我们提供的DOM API在实际使用的时候有着诸多的限制与不方便，如何通过对这些不好用的DOM API进行函数的封装，使它们变成好用的API，是我们这篇文章要探讨的问题。我们将通过实现jQuery中的两个API，来展示jQuery的实现原理。这两个API为addClass和setText。
首先，我们先来看看完整的实现代码：
window.jQuery = function(node) {
var nodes={}
if (typeof node==='string') {
nodes=document.querySelectorAll(node)
} else {
nodes[0]=node
nodes.length=1
}
nodes.addClass=function(classes) {
for(let i=0;i<nodes.length;i++) {
nodes[i].classList.add(classes)
}
}
nodes.setText=function(ChangeText) {
for(let i=0;i<nodes.length;i++) {
nodes[i].textContent=ChangeText
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
一开始，我们可以直接把目光锁定在jQuery函数的作用域里面，在这个函数中，首先我们会传进来一个参数node，这个node可能是选择器，也可能是元素id，因此我们要用typeof来进行判断。
var nodes={}
if (typeof node==='string') {
nodes=document.querySelectorAll(node)
} else {
nodes[0]=node
nodes.length=1
}
若判断出来这个node是string类型的，代表这个node表示的是一个选择器，因此我们通过DOM API里面的querySelectorAll()即可得到这个选择器所代表的节点，并把节点存入一个我们预先定义好的对象nodes中；反之，如果判断出来这个node不是string，则表示这个node代表的是元素的id，因此直接在nodes中将其存入并设置好length的值即可。做到这里，我们以及把我们要操作的节点对象存入到了我们声明的nodes对象中去了。
之后，只要我们对这个nodes对象实现我们所需要的操作，并将其封装在一个匿名函数里面即可，比如：
nodes.addClass=function(classes) {
for(let i=0;i<nodes.length;i++) {
nodes[i].classList.add(classes)
}
}
这个匿名函数就是对nodes对象进行遍历，然后通过DOM API中的classList.add()来为每个存入对象中的节点加入一个类，而这个加入的类由传入的参数classes来决定。最后把这个匿名函数放入nodes对象里的addClass属性中。
同样的，实现setText的原理和上面的类似，也是通过遍历对象中的每个节点，通过改变每个节点的textContent属性来实现setText，代码片段如下：
nodes.setText=function(ChangeText) {
for(let i=0;i<nodes.length;i++) {
nodes[i].textContent=ChangeText
}
}
当完成以上两个匿名函数的封装并存入对象nodes之后，每次我们通过传入参数node来调用jQuery()或者$()，都会得到一个对象nodes，我们把这个对象nodes返回出去给指定变量，使得这个变量也拥有着原本nodes对象的属性，使其可以调用对象中的addClass和setText函数来改变参数node所代表的节点的属性。
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
通过以上的操作，就可以利用DOM API来实现了jQuery API的功能了。
网友评论