浏览器提供了 5 种 Observer 来监听DOM元素的变化：MutationObserver、IntersectionObserver、ResizeObserver、PerformanceObserver、ReportingObserver，其中比较常用的是前三个，能够很方便的实现一些特殊的效果。


# MutationObserver
MutationObserver可以监听DOM树属性的变更,例如节点的增加、删除，属性的变更，以及文本内容的变更
[MDN说明](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)

## 构造函数

```js
var observer = new MutationObserver(function (mutationRecord, observer) {
	// mutationRecord变动数组
	// observer 观察者实例
});

```


## 实例方法

### observe(el[, options])

启动监听，它接受两个参数。
第一个参数：所要观察的 DOM 节点
第二个参数：一个配置对象，指定所要观察的特定变动

配置对象参数如下:
- childList：子节点的变动（指新增，删除或者更改）。
- attributes：属性的变动。
- characterData：节点内容或节点文本的变动。
- subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。
- attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。
- characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。
- attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）

```js
// 开始监听文档根节点（即<html>标签）的变动
observer.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

```
如果某节点多次添加某观察器，回调函数只会触发一次，如果添加的options配置对象不相同，则会当做一个新的观察器，回调函数就会触发多个。
### disconnect()
disconnect() 方法告诉观察者停止观察变动。可以通过调用其 observe() 方法来重用观察者。

###  takeRecords()
用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。

## MutationRecord
[MutationRecord](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationRecord)
每个 MutationRecord 都代表一个独立的 DOM 变化，在每次随 DOM 变化调用 MutationObserver 的回调函数时，一个相应的 MutationRecord 会被作为参数，传递给回调函数。
MutationRecord对象包含了DOM的相关信息，有如下属性:

- type：观察的变动类型（attribute、characterData或者childList）。
- target：发生变动的DOM节点。
- addedNodes：新增的DOM节点。
- removedNodes：删除的DOM节点。
- previousSibling：前一个同级节点，如果没有则返回null。
- nextSibling：下一个同级节点，如果没有则返回null。
- attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
- oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

## 应用场景
1. 监听dom
2. 执行微任务
            
     手动创建文本节点，再修改文本节点内容，触发MutationObserver执行回调函数
     
# IntersectionObserver
[IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)
接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

<font color="red">它的任务就是监听目标元素跟指定父元素（用户可指定，默认为viewport）是否在发生交叉行为，简单理解就是监听目标元素是否进入或者离开了指定父元素的内部</font>

```js
// 创建实例
const observer = new IntersectionObserver(callback, option);
 
// 开始观察element1
observer.observe(element1);
 
// 开始观察element2
observer.observe(element2);
 
// 停止观察
observer.unobserve(element);
 
// 关闭观察器
observer.disconnect();
```

## 构造函数

```js
var observer = new IntersectionObserver(callback[, options]);

```
### callback,
当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数：

- entries 一个IntersectionObserverEntry对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。

- observer 被调用的IntersectionObserver实例。

页面初始化的时候会触发一次callback，entries为所有已监听的目标集合。

注册的回调函数将会在主线程中被执行，所以该函数执行速度要尽可能的快。如果有一些耗时的操作需要执行，建议使用 Window.requestIdleCallback() 方法

### options
一个可以用来配置 observer 实例的对象。
如果options未指定，observer 实例默认使用文档视口作为 root，并且没有 margin，阈值为 0%（意味着即使一像素的改变都会触发回调函数),可配置参数如下：
- root 指定父元素，默认为视窗
- rootMargin 触发交叉的偏移值，默认为"0px 0px 0px 0px"（上右下左，正数为向外扩散，负数则向内收缩）
- threshold 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见。若指定值为 1.0，则意味着整个元素都在可见范围内时才算可见。阈值的默认值为 0.0。

如果设置rootMargin为"20px 0px 30px 30px"，那么元素未到达视窗时，就已经切换为可见状态了：
  
![clipboard-2023-06-13.png](https://blog.qianxun.shop/static/img/170e783f9c379ae2bae27c2e917a5f01.37.webp)

### 实例方法

| 方法 | 说明 | 参数  |
| --- | --- | --- |
| observe | 开始监听一个目标元素 |  dom节点  | 
| unobserve | 停止监听一个目标元素 |  dom节点(要取消观察的目标节点)  | 
| takeRecords | 返回所有监听的目标元素集合 |    | 
| disconnect | 停止所有监听 |    | 


## IntersectionObserverEntry

IntersectionObserverEntry 的实例作为 entries 参数被传递到一个 IntersectionObserver 的回调函数中

| 属性 | 说明 |
| --- | --- |
| boundingClientRect | 目标元素的边界信息,与Element.getBoundingClientRect() 相同 |
| intersectionRatio  | 目标元素的可见比例,即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0    |
| intersectionRect   | 目标元素与视口或根元素的交叉区域的信息    |
| isIntersecting  | 字面理解为是否正在交叉，可用做判断元素是否可见  |
|  target | 目标节点  |
|  time   |  可见性发生变化的时间，是一个高精度时间戳，单位为毫秒。  |

## 应用场景
1. 懒加载

```js
let images = document.querySelectorAll("img.lazyload");

let observer = new IntersectionObserver(entries => {
 entries.forEach(item => {
    if (item.isIntersecting) {
         item.target.src = item.target.dataset.origin; // 开始加载图片
         observer.unobserve(item.target); // 停止监听已开始加载的图片
     }
 });
});

images.forEach(item => observer.observe(item));
```
2. 触底(加载更多)

```html

<ul>
 <li>index</li> // 多个li
</ul>


<div class="reference"></div>
```

```js
new IntersectionObserver(entries => {
  let item = entries[0]; 
  if (item.isIntersecting) console.log("滚动到了底部，开始请求数据");
}).observe(document.querySelector(".reference")); // 监听参照元素
```

3. 吸顶

    实现元素吸顶的方式有很多种，如css的position: sticky，兼容性较差；如果用交叉观察者实现也很方便，同样也要放一个参照元素
    ```html
   <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
    </head>
    <style type="text/css">
      body {
        padding: 0;
        margin: 0;
      }

      #nav {
        width: 100%;
        height: 60px;
        background: #39f;
        color: #fff;
        line-height: 60px;
        text-align: center;
        padding: 0;
        margin: 0;
        list-style: none;
      }

      #nav li {
        float: left;
        width: 25%;
        height: 60px;
      }
      .wrap{
        position: relative;
      }
      .reference{
        position: absolute;
      }
      #nav.fixed {
        position: fixed;
       top: 0;
       left: 0;
       width: 100%;
      }
    </style>

    <body>
      <div class="wrap">
        <h1>H5-学堂</h1>
        <p>
          HTML5学堂是一个热爱H5的讲师组成的组织，致力于构建一个前端、HTML5的分享平台，能够给学生提供一些资料，也为广大前端爱好者提供一个分享平台，其中涉及到的基本知识，JS底层知识，JS底层知识，面试真题、相关技术、未来发展等。
        </p>
        <div class="reference"></div>
        <ul id="nav">
          <li>HTML5学堂</li>
          <li>HTML5微博</li>
          <li>HTML5贴吧</li>
          <li>HTML5微信</li>
        </ul>
        <div class="con">
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
          <p>告别“回到顶部”，如影随行的“吸顶式导航”</p>
        </div>
      </div>

      <script>
        let nav = document.querySelector("#nav");
          let reference = document.querySelector(".reference");
          reference.style.top = nav.offsetTop + "px";
          new IntersectionObserver(entries => {
            let item = entries[0];
            let top = item.boundingClientRect.top;
            // 当参照元素的的top值小于0，也就是在视窗的顶部的时候，开始吸顶，否则移除吸顶
            if (top < 0) nav.classList.add("fixed");
            else nav.classList.remove("fixed");

          }).observe(reference);
      </script>
    </body>

    </html>

   ```
   
   也可以使用[js 监听滚动事件来实现](https://cloud.tencent.com/developer/article/1059038?from=15425&areaSource=102001.1&traceId=NSQfeHm_yw4ysWkmMe_Tn)
   
   4.元素动画
           
      当元素出现时动态添加clsss实现特殊动画效果
      ```JS
        let list = document.querySelectorAll("ul li");

        let observer = new IntersectionObserver(entries => {
           entries.forEach(item => {
              if (item.isIntersecting) {
                 item.target.classList.add("show"); // 增加show类名
                 observer.unobserve(item.target); // 移除监听
             }
           });
        });
        list.forEach(item => observer.observe(item));
     ```
     
     # ResizeObserver
     
     [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化，用法与上面两个Observer类似。
     
```js
const element1 = document.getElementById('div1');
const element2 = document.getElementById('div2');
/* 
 *  新建以一个观察者，传入一个当尺寸发生变化时的回调处理函数
 *  参数entries 是 ResizeObserverEntry 的数组，包含两个最重要的属性：
 *  ResizeObserverEntry.contentRect   包含尺寸信息（x,y,width,height,top,right,left,bottom)
 *  ResizeObserverEntry.target  目标对象，即当前观察到尺寸变化的对象
 *
 */
const robserver = new ResizeObserver( (entries,observer) => {
  for (const entry of entries) {
     // 可以通过 判断 entry.target得知当前改变的 Element，分别进行处理。
     switch(etry.target){
       case element1 :
          entry.target.innerHTML = `第一个DIV尺寸 [${entry.contentRect.width} : ${entry.contentRect.height}]`;
       break;
       case element2 :
          entry.target.innerHTML = `第二个DIV尺寸 [${entry.contentRect.width} : ${entry.contentRect.height}]`;
       break;
     }
  }
});
robserver.observe(element1);
robserver.observe(element2);
```

## ResizeObserverEntry
ResizeObserverEntry 接口是传递给 ResizeObserver() 构造函数中的回调函数参数的对象，它允许你获取真正在观察的 Element 或 SVGElement 最新的大小。

## 应用场景
    1. 监视dom容器宽高的变化
        例如配合echarts，实现图表的自适应

浏览器Observer

js实现撤销重做功能的思路


# 数据结构
我们需要3个变量来保存当前数据、历史数据、未来数据。

- present: 保存当前数据
- past: (undo-stack)-历史数据列表，数组模拟的栈结构
- future: (redo-stack)-未来数据列表，数组模拟的栈结构

# 思路
我们来模拟一个Input输入框的撤销重做过程。
初始数据如下：
```
presebt = ""
past = []
future = []
```

输入字符a

```
presebt = "a"
past = ["a"]
future = []
```

输入字符b
```
presebt = "ab"
past = ["a","ab"]
future = []
```

输入字符c
```
presebt = "abc"
past = ["a","ab","abc"]
future = []
```

撤销

1. past 出栈(数组pop，删除数组最后一项，并将其返回);
2. future 入栈(数组push,插入到数组末尾);
3. present 重新赋值

```
presebt = "ab"
past = ["a","ab"]
future = ["abc"]
```

再撤销
步骤和上面一样
```
presebt = "a"
past = ["a"]
future = ["abc","ab"]
```

重做
1. future 出栈
2. past 入栈
3. present 重新赋值
```
present = "ab"
past = ["a","ab"]
future = ["abc"]
```

继续输入 d
1. past 入栈
2. future 清空
```
present = "abd"
past = ["a","ab","abd"]
future = []
```

js实现撤销重做

访问卷星是一个支持拖拽自定义问卷的低代码项目，从问卷编辑到发布，再到答卷统计，完成业务的闭环。




## 开发准备

### create-react-app项目初始化
```shell
npx create-react-app react-questionnaire --template typescript
```
### 代码规范

#### eslint
1. 安装eslint

```shell
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
```
2. eslint配置
生成配置文件

```shell
npx eslint --init
```
![](https://blog.qianxun.shop/static/img/96127729412631a7120bb4d6aa9544b3.clipboard-2023-05-22.webp)

3. 添加校验命令
![](https://blog.qianxun.shop/static/img/49657d1517652c673b58c58a9bbde98d.clipboard-2023-05-22.webp)

#### prettier
1. 安装prettier

```shell
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
```
2. 自定义自己的prettier配置
在项目根目录下新建配置文件`.prettierrc.js`

```js
module.exports = {
    // 箭头函数只有一个参数的时候可以忽略括号
    arrowParens: 'avoid',
    // 括号内部不要出现空格
    bracketSpacing: true,
    // 行结束符使用 Unix 格式
    endOfLine: 'lf',
    // true: Put > on the last line instead of at a new line
    jsxBracketSameLine: false,
    // 行宽
    printWidth: 100,
    // 换行方式
    proseWrap: 'preserve',
    // 分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 缩进
    tabWidth: 2,
    // 使用 tab 缩进
    useTabs: false,
    // 后置逗号，多行对象、数组在最后一行增加逗号
    trailingComma: 'es5',
    parser: 'typescript',
  }
  
```
注意事项: 防止配置信息冲突，最好重启vscode

3. 添加prettier命令

在package.json script添加以下指令代码

```shell
"format": "prettier --write 'src/**/*.+(js|ts|jsx|tsx)'"
```
给vscode添加当前工程的配置信息
在项目根目录下新建文件夹`.vscode` 并在其下新建配置文件`settings.json`,配置信息如下
```json
{
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}
```
#### husky

1. 安装husky

```shell
npm install husky -D
```
2. 使用

```shell
npm pkg set scripts.prepare="husky install"
npm run prepare
```

3. 添加pre-commit hooks

```shell
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run format"
npx husky add .husky/pre-commit "git add ."
```
4. 添加commitlint

```shell
# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
```
5. 添加commit-msg hooks

```shell
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'
```

React:访问卷星(开发准备阶段)

mengui-cli项目脚手架

mengui-cli是小寻根据慕课网相关资料，开发的个人开发工具支持将项目模版一键下载、安装、启动的小工具。


![](https://blog.qianxun.shop/static/img/91e667ba8f4ef8e39ef98831cc703b8c.40.webp)

根据个人喜好将开发好的项目模版或组件库模版上传到npm,在使用脚手架初始化项目时自动从npm下载，安装依赖