实现一个简化版的jQuery的API

代码地址：https://github.com/aaronyxu/slider-demo-2

实现目的

本文的目的是通过模仿jQuery实现两个简化的jQuery的API：

$nodes.addClass(classes)
$nodes.setText('text') 

1. $nodes 是我们模仿jQuery建立的一个简化版的jQuery对象。

2. $nodes.addClass(classes) 给所有的$nodes 添加指定的class。

其中参数 classes可以是一个字符串表示一个样式类名，也可以是个数组，表示多个样式类名，同时添加多个classes。

3. $nodes.setText('text') 把所有的 $nodes 的 textcontent 变为指定的文本内容。

   参数 'text' 是一个字符串。

验证方法

为了验证API的准确性，我们要求API能实现以下功能：

var $div = $('div') // 接收一个包含CSS选择器的字符串，创建一个由简化版jQuery包装的DOM元素
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
$div.addClass(['small', 'circle']) // 可将所有 div 的 class 同时添加一个 small 和 circle

HTML 代码

CSS 代码

.demo {
    width: 400px;
    height: 300px;
    border: 10px solid black;
    font-size: 20px;
    display: inline-block;
}
.red {
    background: red;
}
.circle {
    border-radius: 50%;
}
.small {
    width: 200px;
    height: 150px;
}

命名空间和返回对象结构统一

首先我们要写一个函数，使得传入函数的节点或者是一个包含CSS选择器的字符串，都返回一个经过我们包装过的一个DOM对象，这个新对象必须保持形式统一，并且同时含有 addClass 和 setText 两个属性，这样我们就能直接在新对象调用我们所实现的两个API。

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
        }
    }

    nodes.addClass = function(classes) {
    }
    nodes.setText = function(text) {
    }

    return nodes
}
window.$ = jQuery

1. 为了使得通过包含CSS选择器的字符串返回得到的对象保持纯净（不包含DOM对象的原型链），我们通过遍历 document.querySelectorAll(nodeOrSelector) 得到一个纯净的伪数组。

2. 同时为了使得由字符串和节点传入返回得到的对象保持结构一致，我们把由传入节点返回的对象也包装成一个纯净的伪数组。

   nodes = {
       0: nodeOrSelector,
       length: 1
   }
   

3. 同时我们所返回的对象也必须含有 addClass 和 setText 属性。

   nodes.addClass = function(classes) {
   }
   nodes.setText = function(text) {
   }
   

4. 为了方便书写，使得 $ 缩写来返回得到一个jQuery对象

   window.$ = jQuery
   

addClass属性

为了简化操作，我们只在这里考虑两种参数类型。

1. 字符串

   表示一个指定添加的class名称

2. 数组

   数组的value表示一组指定添加的class名称

所以我们需要先判断传入的参数是哪种类型

    nodes.addClass = function(classes) {
        if (classes instanceof Array) {
            classes.forEach((value) => {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(value)
                }
            })
        } else if (typeof classes === 'string') {
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].classList.add(classes)
            }
        }

    }

• 对于数组我们首先调用数组的 forEach 遍历 classes 再通过 for 循环遍历 nodes 把所有样式类名添加到所有 nodes 中。
• 对于字符串，我们直接使用 for 循环遍历 nodes 。

setText属性

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

我们通过 for 循环遍历 nodes 调用DOM元素的 textContent 函数 给所有 nodes 添加指定的文本内容

验证结果

我们在浏览器的console界面输入以下代码

var $div = $('div') // 接收一个包含CSS选择器的字符串，创建一个由简化版jQuery包装的DOM元素
$div

浏览器console界面截图

返回得到了一个纯净的伪数组，4个div，length 属性 以及我们需要调用的2个函数addClass 和 setText。

$div.addClass('red') // 可将所有 div 的 class 添加一个 red

CSS 代码：

.red {
    background: red;
}

我们可以看到所有div的背景变红了。

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

我们可以看到所有div都被添加了文本内容：hi。

$div.addClass(['small', 'circle']) // 可将所有 div 的 class 同时添加一个 small 和 circle

CSS 代码：

.circle {
    border-radius: 50%;
}
.small {
    width: 200px;
    height: 150px;
}

我们可以看到所有div的class同时被添加了 small 和 circle。

完