通过封装两个函数来了解jQuery

189 阅读3分钟

Dom的API并不是给HTML或是JS量身定做的,所以才有了各种各样的库,jQuery只是众多库里比较受欢迎的一个。Dom的选择器格式复杂,且种类不多,Dom的方法也很不齐全,为了实现一个很小的需求,可能要辗转拼接使用很多个Dom的API,这些在Dom API 的基础上进行灵活拼接最终形成了新的函数,能满足更多更复杂的需求,直接调用,方便快捷,但是如果不把这些自定义的函数有序的整理起来,便很容易出现函数名的覆盖,污染全局作用域等问题,于是把这些新的函数放到同一个全局对象里,作为这个对象的方法,需要用到某个函数时,直接调用这个对象的方法,而这个对象,就叫做库。

1. 封装一个具有addClass功能的函数

用Dom的方法给一个节点添加或减少类一般用Element.classList.add(或remove)("xxx","xxx"),虽然可以同时增加或移除多个类,但add和remove必须要分开执行,不能在add的同时执行remove操作,下面进行改进:
第一步:可以把需要添加或移除的类放到一个空对象里作为键名,健值为true,意为添加,健值为false,意为移除。
第二步:用for..in方法遍历这个数组,if语句判断执行classList.add还是classList.remove。

第三步:把前两步的代码装到一个命名为addClass的函数里,函数有两个参数,一个是节点对象,一个是需要操作的类的对象
第四部:用三目运算符简化代码
最后,创建一个命名空间,把优化好的函数放进去。命名空间相关链接baike.baidu.com/item/namesp…

------------------所有截图均来自饥人谷视频教程--------------------------

2.封装一个具有setTxt功能的函数

第一步:在原有Dom API (.textContent)的基础上,加上一个循环遍历,实现给一个父节点下所有子节点添加文本内容的功能。

第二步:功能升级。如果函数没有参数,则默认是获取文本内容,遍历所有子节点后将所有子节点的文本内容放到一个空数组里并返回;如果函数有参数,则默认是添加文本内容,遍历所有子节点时把参数作为文本内容依次传入每个子节点。
第三步:封装。
总结:因为Dom的API不好用,不能直接满足需求,所以在Dom API的基础上创造出了很多功能更强大,种类更多的新API,(这些API可以直接定义在Node.prototype上,覆盖掉之前同名的,不好用的API,但这样会导致不同的人命名时互相覆盖)为了防止函数名覆盖,污染全局变量,这些API需要放在一个新的全局对象里,这就是库的由来。