利用DOM API实现两个jQuery API

    本篇文章将介绍如何使用浏览器提供的原生DOM API来实现jQuery的两个实用的API。

    通过了解DOM API,我们可以知道,浏览器给我们提供的DOM API在实际使用的时候有着诸多的限制与不方便,如何通过对这些不好用的DOM API进行函数的封装,使它们变成好用的API,是我们这篇文章要探讨的问题。我们将通过实现jQuery中的两个API,来展示jQuery的实现原理。这两个API为addClasssetText

    首先,我们先来看看完整的实现代码:

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
    }

    若判断出来这个nodestring类型的,代表这个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对象的属性,使其可以调用对象中的addClasssetText函数来改变参数node所代表的节点的属性。

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

    通过以上的操作,就可以利用DOM API来实现了jQuery API的功能了。

本教程版权归宣泽彬所有,转载须说明来源

    原文作者:宣泽彬
    原文地址: https://www.jianshu.com/p/ad7aa110fe92
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞