手写 DOM 库 Note-FrontEnd-23封装 DOM 的相关知识，内容包括什么是封装、对象风格、封装后的增删改

封装 DOM 的相关知识，内容包括什么是封装、对象风格、封装后的增删改查、封装 DOM 的源代码。

一、什么是封装

1. 举例

电脑笔记本就是 CPU、内存、硬盘、主板、显卡的封装

2. 接口

被封装的东西需要暴露一些功能给外部，这些功能就是接口，如 USB 接口、HDMI 接口

设备只要支持这些接口，即可与被封装的东西通讯，比如键盘、鼠标支持 USB 接口，显示器支持 HDMI 接口

3. 术语

库：我们把提供给其他人用的工具代码叫做库，比如 jQuery、Underscore

API： 库暴露出来的函数或属性叫做 API（应用编程接口）

框架： 当你的库变得很大，并且需要学习才能看懂，那么这个库就叫做框架，比如 Vue / React

注意： 编程的术语大部分很随意，没有固定的解释，所以意会即可

二、对象风格

也叫命名空间风格，window.dom 是我们提供的全局对象

新建一个 DOM 库

// 可以这样写
window.dom = {}
dom.create = function(){}

// 也可以这样写
window.dom = {}
window.dom.create = function(){}

// 还可以这样写
window.dom = {
    create: function(){}
}

// 再简略点还可以这样写
window.dom = {
    create(){}
}

我犯的一个很 sb 的错误，查了半天

问：它说 dom 没定义，哪里错了？

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 1</title>
</head>
<body>
    示例 1
    <script src="main.js"></script>
    <script src="dom.js"></script>
</body>
</html>

// main.js
const div = dom.create('div')
console.log(div)

// dom.js
 window.dom = {
    create(tagName){
        return document.createElement(tagName)
    }
}

答：在 index.html 中我把 dom.js 写到 main.js 之后了，这就是先使用再定义，在 html 里调换顺序即可

三、封装后的增

dom.create(`<div>hi</div>`) 用于创建节点
dom.after(node,node2) 用于新增弟弟
dom.before(node,node2) 用于新增哥哥
dom.wrap(node,parent) 用于新增爸爸

四、封装后的删

dom.remove(node) 用于删除节点
dom.empty(parent) 用于删除后代

五、封装后的改

dom.attr(node,'title',?) 用于读写属性
dom.text(node,?) 用于读写文本内容
dom.html(node,?) 用于读写 HTML 内容
dom.style(node,{color:'red'}) 用于修改 style
dom.class.add(node,'blue') 用于添加 class
dom.class.remove(node,'blue') 用于删除 class
dom.on(node,'click', fn) 用于添加事件监听
dom.off(node,'click',fn) 用于删除事件监听

六、封装后的查

dom.find('选择器') 用于获取标签或标签们
dom.parent(node) 用于获取父元素
dom.children(node) 用于获取子元素
dom.siblings(node) 用于获取兄弟姐妹元素
dom.next(node) 用于获取弟弟
dom.previous(node) 用于获取哥哥
dom.each(nodes,fn) 用于遍历所有节点
dom.index(node) 用于获取排名老几

七、封装 DOM 的源代码

这次就是学习封装技术的，封装后的源码 → 点击这里