简单模仿两个jQuery API

这篇博客主要是使用DOM API进行封装模仿jQuery API的实现。在平常写代码时常常会发现DOM API在大多数情况下实现一个功能十分复杂，如果使用jQuery API就方便很多。现在我就来将DOM API进行简单封装，实现两个模仿jQuery的API，以下是全部代码：

window.jQuery = function(nodeOrSelector){
    let nodes = {}
    if(typeof nodeOrSelector === 'string'){
        nodes = document.querySelectorAll(nodeOrSelector)
    }else{
        nodes[0] = nodeOrSelector
        nodes.length = 1
    }
    nodes.addClass = function(classes){
        for(let i=0; i<nodes.length; i++){
            nodes[i].classList.add(classes)
        }
    }
    nodes.setText = function(contents){
        for(let i=0; i<nodes.length; i++){
            nodes[i].textContent = contents
        }
    }
    return nodes
}

window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')

    首先我们先看代码的第一部分，jQuery是一个函数，这个函数接受一个参数（nodeOrSelector），这个参数可以是元素id也可以是选择器。在函数内部先声明一个nodes的内部变量，让其指向一个空对象。接下来将传入的参数进行判断，如果传入参数的类型是字符串（即传入参数为选择器），便可通过DOM API中的document.querySelectorAll()来获取选择器对应的全部节点所形成的伪数组，并将这个伪数组赋值给变量nodes；如果传入参数类型不是字符串（即传入参数为元素id），就直接将nodes第一项的值改为传入的参数（元素id），并设置好length的值为1。到此我们可获得nodes伪数组，方便我们接下来操作其中的节点元素。

window.jQuery = function(nodeOrSelector){
    let nodes = {}
    if(typeof nodeOrSelector === 'string'){
        nodes = document.querySelectorAll(nodeOrSelector)
    }else{
        nodes[0] = nodeOrSelector
        nodes.length = 1
    }

    接着我们来看一下代码的第二部分，先给nodes伪数组新增一个键值对，键名为addClass，值为一个匿名函数，匿名函数接受一个参数（classes）。此匿名函数主要作用是遍历nodes这个伪数组，给其中所储存的所有节点添加class属性（利用DOM API中的.classList.add()），属性值为参数classes。

nodes.addClass = function(classes){
        for(let i=0; i<nodes.length; i++){
            nodes[i].classList.add(classes)
        }
    }

    代码的第三部分与第二部分类似，也是为nodes伪数组新增一个键值对，其中匿名函数的作用是遍历nodes这个伪数组，给其中所储存的所有节点添加文本内容（利用DOM API中的.textContent），文本内容为参数contents。
    最后返回nodes这个伪数组。

nodes.setText = function(contents){
        for(let i=0; i<nodes.length; i++){
            nodes[i].textContent = contents
        }
    }
    return nodes
}

在这里我使用到了闭包，以现在我的理解闭包是：函数内调用函数外所声明的变量，那这个函数与这个变量称作闭包。

    最后一部分的代码便是调用这个模仿jQuery的API的方法。值得注意的是：大部分jQuery使用者习惯使用$来表示jQuery，调用jQuery函数会返回nodes对象（伪数组），将这个对象赋值给一个变量时，此变量名前通常也加上$符号进行区分。

window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')