手写DOM库（1）

手把手教你封装DOM，封装出一些接口，用来操作DOM(页面的节点)。
把一个复杂的东西打包成服务，然后只需要简单的命令就可以操作它。

什么叫封装
举例
笔记本电脑就是CPU、内存、硬盘、主板、显卡的封装
用户只需要接触显示器、键盘、鼠标、触控板等设备，即可操作复杂的计算机。
接口
被封装的东西需要暴露一些功能给外部
这些功能就是接口，如USB接口、HDMI接口。
这些接口都有规范的文档来说明。文档内容包含功能和实现的细节，别人就可以根据文档内容仿制。
设备只要支持这些接口，即可与被封装的东西通讯
比如键盘、鼠标支持USB接口，显示器支持HDMI接口

封装和接口的关系，如下图所示：

术语
库
我们把提供给其他人用的工具代码叫做库(很多函数放到一起给别人用就叫做库)
比如jQuery、Underscore
API
库暴露出来的函数或属性叫做 API应用编程接口
框架
当你的库变的很大，并且需要学习才能看懂，
那么这个库就叫框架，比如Vue/React
注意
编程界的术语大部分都很随便，没有固定的解释
所以意会即可

其它
1.工具parcel
安装:yarn global add parcel //yarn global add parcel @1.12.3 指定版本
parcel --version
使用:parcel src/index.html //启动一个服务器，这个服务器会自动刷新
2.简写

window.dom.create = function () { } 可以简写成
window.dom = {
    create() { }
}

const childNodes = node.childNodes 可以简写成
const { childNodes } = node

3.template标签可以放任意元素,但不会在页面显示，是专门用来容纳的
4.trim()去掉字符串两边的空格
const div =dom.create(" <td></td>");
5.const { childNodes } = node //从node获取到childNodes
6.封装删除操作时需要保留节点的引用(要return)
return node
方便用户继续做其它操作
7.用for循环遍历删掉的childNodes时，childNodes.length是实时改变的！
就是当我们remove后i就不是<7,而是<6了
不能用for循环，试试while
8.js中一个函数可以接收多种参数，当操作并列时，可以根据参数长度判断用户的操作
例如：根据参数长度判断用户是读还是写
读和写操作是一起的，可以根据参数长度判断用户的操作。
设计模式
重载:根据参数个数写不同的代码就是重载
适配:为了确保功能的实现，根据不同的生产环境，编写相应的代码。
9.语法
(1)||

return (scope || document).querySelectorAll(selector)

如果有scope就在scope里调用querySelectorAll, 没有就用document来querySelectorAll
(2)

if(typeof name==='string'){
  //如果name是字符串
}else if(name instanceof object){
  //如果是对象
}

(3)for (let key in object) { //遍历object }
变量必须放进[] node.style.[key]
10.JS去操控CSS可能导致回流和重绘。
document.style.background=“red”;
document.style.fontSize=“24”;
这样的话相当于【元素的样式被改变了两次】！整个JavaScript的性能就下来了。必要的时候（对一个元素更改多个样式）我们可以“把他们合在一起”：
document.style.cssText=“background:red;font-size:24;”;
11.加debugger调试

12.未为变量赋值时默认值为undefined
函数，当它被调用时，人们希望它返回一些东西。但是你没有明确返回return任何内容
因此js默认会返回undefined。
13.不管你是用什么语言，实现逻辑时只需要3种表达形式：
第1种.顺序执行
第2种.if…else
第3种.while或者for循环

封装技术，用2种风格封装DOM操作

第一种.用对象风格封装DOM操作(原生js)

查看完整代码

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

一.增

增
dom.create(