手把手教你封装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(