利用DOM API实现两个jQuery API

    本篇文章将介绍如何使用浏览器提供的原生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的功能了。

本教程版权归饥人谷_宣泽彬和饥人谷所有，转载须说明来源