jQuery 初探：写一个类似jQuery的API

前言（可忽略）：最近因为一些自己的事情学习停滞了一段时间，再捡起来时就非常的艰涩，极大的打击了我的学习热情，结果导致我开始了漫不经心的学习模式，偷懒时间远远大于学习时间，恶性循环下，导致学习进程大幅的落后，在学习中变得焦躁盲目的想追赶进度不能踏实的学习，所以正在慢慢调整状态之中，在这里以惨痛经历奉劝各位学习的朋友们，无论再忙都不要停下学习的脚步，哪怕只能抽空翻翻自己的笔记，也要远远好过让学习的状态和记忆从脑子中溜走，一起加油。

终于开始学习jQuery了，早先在学习原生JS时，多次听到方方提到，这里要是用了jQuery会方便的多，故而一直很感兴趣，我们知道jQuery是目前使用非常广泛的JavaScript函数库，今天我们就通过写出一个类似jQuery的API来试着理解jQuery的原理。

一、封装函数

首先先写出一个列表，并给出id，之后都将对其操作。

image

接着我们来满足两个需求：

1，获取到一个节点的所有兄弟姐妹

2，给节点添加多个类名

需求1：获取到一个节点的所有兄弟姐妹

我们以选中节点item2为例，获得它所有的兄弟姐妹，我们想到了DOM API 中的ParentNode.children属性，返回该节点的所有元素孩子。

我们的想法就很简单了，返回节点父亲的所有孩子，然后遍历这个伪数组（children属性返回一个HTMLCollection实例，是一个伪数组），将不等于自身节点的其他节点放入一个空对象里。

image

值得注意的是，我们所声明的array是一个伪数组，所以在遍历后不能使用数组的push方法，那么怎么把value放进数组呢？所以使用array[array.length]=allChildren[i]的方法（不能放i,因为我们设置了if语句，会有i跳过了）

代码已经实现，我们把它封装成一个函数，方便我们调用。

image

如图，我们就获得了一个函数方法 getSiblings(node).

需求2：给节点添加多个类名

同理，我们再完成需求2，并进行封装。

我们可以生成一个classes数组，直接用数组的forEach方法。

或者classes伪数组，属性并对应布尔值，遍历它，然后使用dom api 的node.classList.add或者remove。

然后封装函数。

声明伪数组

声明classes是数组

两者都可以实现添加多个class这样一个功能。

这样我们两个需求就已经都实现了。

二、命名空间

我们获得了两个函数：getSiblings() , addClass() ,他们都是操纵节点，那我们能把他们联系起来吗？所以我们可以把他们放到一个库里，给它命名，这就叫命名空间。

window.cydom = {}
cydom.getSiblings(node)
cydom.addClass(node,classes)

这样的好处一是别人可以知道我们库的名字，方便使用。二是避免不知不觉的把全局变量给覆盖了。

image

三、能不能把 node 放在前面

我们更习惯于把node放在前面，就像下面一样，怎么搞？

node.getSiblings()node.addClass()

方法一：扩展node接口

也就是直接在 Node.prototype 上添加这个函数，这样我们的节点就可以继承到这个函数方法了。

image

这样就可以node放在前面了，至于上图中this，还记得call吗？call的第一个参数可以用this得到。

item2.getSiblings() 等同于  item2.getSiblings.call(item2)item2.addClass({a:true,b:true})  等同于 item2.addClass.call(item2,{a:true,b:true})

但是这样还是有缺点在的，会不会已声明过这个函数，然后我们调用时就被覆盖了。

方法二：构造新的接口

image

这样的方法叫[无侵入]。值得注意的是，getSiblings() 和 addClass() 没有传入参数，为什么代码不用this，这是因为我们第一步就已经传入节点，也就是从新接口内传入了。

四、我们把Node2改个名字吧

不用说你应该也知道我想要改什么了吧

image

作者：饥人谷_陈杨
链接：https://www.jianshu.com/p/84c5d333df16