遵循Promises/A+规范，如何手写一个Promise

# 前言
`<canvas>`元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将canvas画布推至极限，性能开始成为问题。此文目标是给使用canvas画布元素的优化带来建议，去保证你的网站或者应用表现卓越。

## 性能贴士

**在离屏canvas上预渲染相似的图形或重复的对象**  

如果发现自己在每个动画帧上重复了一些相同的绘制操作，请考虑将其分流到屏幕外的画布上。 然后，您可以根据需要频繁地将屏幕外图像渲染到主画布上，而不必首先重复生成该图像的步骤。

```js
myEntity.offscreenCanvas = document.createElement("canvas");
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");

myEntity.render(myEntity.offscreenContext);
```

**避免浮点数的坐标点，用整数取而代之**  

当你画一个没有整数坐标点的对象时会发生子像素渲染。
```js
ctx.drawImage(myImage, 0.3, 0.5);
```

浏览器为了达到抗锯齿的效果会做额外的运算。为了避免这种情况，请保证在你调用drawImage()函数时，用Math.floor()函数对所有的坐标点取整。


**不要在用drawImage时缩放图像**  
在离屏canvas中缓存图片的不同尺寸，而不要用drawImage()去缩放它们。

**使用多层画布去画一个复杂的场景**  

在您的应用程序中，您可能会发现某些对象需要经常移动或更改，而其他对象则保持相对静态。 在这种情况下，可能的优化是使用多个`<canvas>`元素对您的项目进行分层。
例如，假设您有一个游戏，其UI位于顶部，中间是游戏性动作，底部是静态背景。 在这种情况下，您可以将游戏分成三个`<canvas>`层。 UI将仅在用户输入时发生变化，游戏层随每个新框架发生变化，并且背景通常保持不变.
```js
<div id="stage">
  <canvas id="ui-layer" width="480" height="320"></canvas>
  <canvas id="game-layer" width="480" height="320"></canvas>
  <canvas id="background-layer" width="480" height="320"></canvas>
</div>

<style>
  #stage {
    width: 480px;
    height: 320px;
    position: relative;
    border: 2px solid black
  }
  canvas { position: absolute; }
  #ui-layer { z-index: 3 }
  #game-layer { z-index: 2 }
  #background-layer { z-index: 1 }
</style>
```

**用CSS设置大的背景图**  
如果像大多数游戏那样，你有一张静态的背景图，用一个静态的`<div>`元素，结合`background` 特性，以及将它置于画布元素之后。这么做可以避免在每一帧在画布上绘制大图

**用CSS transforms特性缩放画布**  

CSS transforms 使用GPU，因此速度更快。 最好的情况是不直接缩放画布，或者具有较小的画布并按比例放大，而不是较大的画布并按比例缩小。
```js
var scaleX = window.innerWidth / canvas.width;
var scaleY = window.innerHeight / canvas.height;

var scaleToFit = Math.min(scaleX, scaleY);
var scaleToCover = Math.max(scaleX, scaleY);

stage.style.transformOrigin = '0 0'; //scale from top left
stage.style.transform = 'scale(' + scaleToFit + ')';
```

**关闭透明度**  
如果你的游戏使用画布而且不需要透明，当使用 HTMLCanvasElement.getContext() 创建一个绘图上下文时把 alpha 选项设置为 false 。这个选项可以帮助浏览器进行内部优化。

```js
var ctx = canvas.getContext('2d', { alpha: false });
```

**更多的贴士**  
* 将画布的函数调用集合到一起（例如，画一条折线，而不要画多条分开的直线）
* 避免不必要的画布状态改变
* 渲染画布中的不同点，而非整个新状态
* 尽可能避免 shadowBlur特性
* 尽可能避免text rendering
* 尝试不同的方法来清除画布 **(clearRect() vs. fillRect() vs. 调整canvas大小)**
*  有动画，请使用`window.requestAnimationFrame()` 而非`window.setInterval()`
* 请谨慎使用大型物理库

canvas的优化

# 前言
今天一看日历都12月30号了！！！ 2021就这么过去了！！！ 从来没写过年度总结，也一直以来不爱用文字表达，并且最近又忙又懒，忙着打游戏上班，懒得打字 -。-！！，今年变化较大的一年，今年差不多年底换了工作，年中在家歇了几个月。  
但终究一年过去了，还是需要有一个总结仪式的嘛。同时希望在未来的每一年都能写一次年度总结，看看之前走过的路，也回望以往的不足，展望一下未来。  
但是回想这一年，浑浑噩噩的好像也没啥能记起来的，就慢慢想着写吧。。。

**总结的话主要总结以下几点吧** 
+ 技术
+ 学习
+ 工作
+ 家庭

## 技术
21年技术成长说实话不是很多，感觉到一个技术瓶颈了，或许是前两年一直在做快应用相关的业务，对web偏离太多了，好在年底11月换了工作，业务更偏底层和业务一些，相对能提升的东西更多一些。毕竟技术成长个人感觉还是更多是业务驱动的，毕竟闲时间还得打游戏。。。

## 学习
好在今年搭了自己的博客，没事还想写几篇技术积累文章，学习的小动力是有的，不然写不出来东西
做前端这块，我觉得要保持学习的欲望、要保有好奇心，能持续不断对一些东西感兴趣，不断去往前学。在学习欲望这一块我自我感觉还是不错的，这也是我一直以来喜欢做程序员的理由吧，每当我看到一些效果或者游戏或者程序之类，我都会去想，如果是我去做我做这个东西我会怎么去做呢？怎么做才更优雅？有没有更优解？哎，这不学习的小动力不就来了嘛。
今年框架主要就学了 Vue 3.0 虽然好像目前没有业务能用到 （目前业务全是react侧），但是要拥抱变化嘛（淦~！）
其他杂七杂八的看的挺多，如果我觉得有意思的话，我会专门写篇博客来研究这个特性，这里就不展开说了，其实主要是太杂了 不知道咋说

## 工作
工作毕竟11月换的，在这边呆的时间不久，但是目前来说是我最喜欢的一家公司，一来离家近，骑车10分钟到，节省我太多的通勤时间了，这边的技术氛围还是挺轻松的，而且业务方向我很感兴趣，现在在这边目前主要做一些小游戏，这边技术栈主要是`Preact`(和react一样的轻量框架 几乎无缝切换 差异很小)，后续具体是以项目方向呢（好像有项目奖金）还是做更底层的`SDK`方向呢（对技术提升有帮助），这个回头还得想一想。。。

## 家庭

和老婆领证结婚一年多了了，到现在相距我们认识已经4年多了，时间确实快呀！现在感情越来越稳定了呢，前几年没事还吵吵架，今年也很少吵架了，就算吵也是点鸡毛蒜皮的事，最让我在意的就是老婆的减肥大计，计划了一整年（或许更久 = =！！），到目前已经放弃了估计！（准备明年办婚礼，可给我焦虑死了 QAQ），没事慢慢减嘛。老婆下半年也半辞了工作，开始做了自媒体，等她成功了赚了大钱，我就躺家里吃软饭 嘿嘿嘿嘿！！！

## 结语

2021年真是魔幻的一年，感觉自己什么都没做，歘！ 一年就过去了。马上就要2022年了，希望2022所有人万事顺意~ 

今天写到这吧 后面能想起来再加，想不起来就到时候写在2022年总结里面吧

「2021总结」赶在年末写个总结


# 新特性预览

* String.prototype.replaceAll( )
* 私有方法 Private Methods 与私有访问者 Private Accessors
* Promise.any 与 AggregateError
* WeakRefs 弱引用
* 逻辑运算符和赋值表达式
* Numeric separators


## String.prototype.replaceAll( )
以前我们想全部替换某个字符串内部字符，则需要	`String.prototype.replace`和`regexp` 来配合使用

```js
const str = "i am a test string";

// before
str.replace(/a/g, "")
console.log(str)
// "i m  test string"

// now
str.replaceAll("a", "")
console.log(str)
// "i m  test string"
```

## Promise.any
当`Promise`列表中的任意一个`promise`成功`resolve`则返回第一个`resolve`的结果状态， 如果所有的`promise`均`reject`，则抛出异常表示所有请求失败

```js
// 官方提供例子-检测哪个网站更快
Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
  // Any of the promises was fulfilled.
  console.log(first);
  // → 'home'
}).catch((error) => {
  // All of the promises were rejected.
  console.log(error);
});

```

##  Private Methods 
私有方法只能在定义它的类内部访问，专用方法名称以开头#

```js
class Person {
	age=18
	#setAge(age){
		this.age = age
	}
}
const p = new Person()
p.setAge(20) // TypeError: p.setAge is not a function
```

## 逻辑运算符和赋值表达式

```js
a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)
```
* a ||= b：当a值不存在时，将b变量赋值给a
* a &&= b：当a值存在时，将b变量赋值给a
* a ??= b：当a值为null或者undefined时，将b变量赋值给a

## Numeric separators

数字的可读性随着数字长度的增加而降低。现在，则可以使用下划线 `_` 来分隔数字组，使得长数字更加清晰可读。

```js
const num1 = 123456789
const num2 = 123_456_789

console.log(num1 === num2)
// true

```



ECMAScript 2021 新特性（ES12）

# 前言

最近刚刚入职，一直在熟悉新公司的项目中，没有时间写博客了。新公司主要做互动相关还有小游戏相关的东西 ，而这正好是我的兴趣方向，很开心，嘿嘿嘿。 今天周末 正好有时间 ，写写东西吧 不能松懈下来就不写博客了 加油！

## 什么是Intersection Observer API
> Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。
过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：
图片懒加载——当图片滚动到可见时才进行加载
内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
在用户看见某个区域时执行任务或播放动画
过去，相交检测通常要用到事件监听，并且需要频繁调用 Element.getBoundingClientRect() 方法以获取相关元素的边界信息。事件监听和调用 Element.getBoundingClientRect() 都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。
假如有一个无限滚动的网页，开发者使用了一个第三方库来管理整个页面的广告，又用了另外一个库来实现消息盒子和点赞，并且页面有很多动画（译注：动画往往意味着较高的性能消耗）。两个库都有自己的相交检测程序，都运行在主线程里，而网站的开发者对这些库的内部实现知之甚少，所以并未意识到有什么问题。但当用户滚动页面时，这些相交检测程序就会在页面滚动回调函数里不停触发调用，造成性能问题，体验效果让人失望。
Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时(或者 viewport )，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。这样，我们网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理。
注意 Intersection Observer API 无法提供重叠的像素个数或者具体哪个像素重叠，他的更常见的使用方式是——当两个元素相交比例在 N% 左右时，触发回调，以执行某些逻辑。

## 用法用量

for 一个栗子

```js
let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let callback =(entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed target element:
    // entry.boundingClientRect
    // entry.intersectionRatio
    // entry.intersectionRect
    // entry.isIntersecting
    // entry.rootBounds
    // entry.target
    // entry.time
  });
};

let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#listItem');
observer.observe(target);
```
### options
* **root**   
  指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。
  
* **rootMargin**  
根(root)元素的外边距。类似于 CSS 中的 margin 属性，比如 "10px 20px 30px 40px" (top, right, bottom, left)。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为0。
* **threshold**  
可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要 target 元素在 root 元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组 [0, 0.25, 0.5, 0.75, 1]。默认值是0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。该值为1.0含义是当 target 完全出现在 root 元素中时候 回调才会被执行。



今天聊聊 Intersection Observer API

# 前言&引子
先来看效果吧  
![image.png](https://img.haoolee.com/article/lfcnmavs-image.png)

![image.png](https://img.haoolee.com/article/jf4t2u5y-image.png)

![image.png](https://img.haoolee.com/article/dzb6p0ol-image.png)

好了 效果看完了 谁还写博客啊  等过几天在写吧

聊一聊直播弹幕遮罩是怎么实现的

# 前言
前段时间读了几遍Vue3响应式核心的源码 对vue3响应式核心 明白了依赖收集和响应式原理 今天自己动手简单的实现一下 加深一下理解

## 响应式核心
```js
const targetMap = new WeakMap()
let activeEffect

// track ==> 依赖追踪收集核心
function track(target, type, key) {
    console.log('track')
    let depsMap = targetMap.get(target);
    // 检查是否被追踪
    if (!depsMap) {
        // 没有被追踪 新建一个并添加进去
        targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key);
    // 检查当前依赖列表是否包含当前key
    if (!dep) {
        // 没有就代表没被追踪 新建一个
        depsMap.set(key, (dep = new Set()))
    }

    // 检查依赖中是否包含activeEffect
    // activeEffect的赋值在 effect 中  而 effect的调用在mount的时候
    if (!dep.has(activeEffect)) {
        dep.add(activeEffect);
        // activeEffect.deps.push(dep)
    }
}

function trigger(target, type, key) {
    console.log('trigger')
    const depsMap = targetMap.get(target)
    if (!depsMap) {
        // never been tracked 没有被追踪 直接溜溜球
        return;
    }

    // let deps = []
    // if(key !== undefined){
    //     deps.push(depsMap.get(key))
    // }
    //
    let dep = depsMap.get(key)
    // 如果有依赖 那就执行 dep在track中设置为一个Set类型 里面保存着effect
    if (dep) {
        dep.forEach(effect => {
            effect.run()
        })
    }
}

function effect(fn, options) {
    const _effect = new ReactiveEffect(fn)
    _effect.run()
    const runner = _effect.run.bind(_effect);
    runner.effect = _effect;
    return runner;
}

class ReactiveEffect {
    constructor(fn, scheduler = null) {
        this.fn = fn
        this.scheduler = scheduler
    }

    run() {
        activeEffect = this
        return this.fn()
    }

}


// 所有经过reactive代理的集合
const reactiveMap = new WeakMap()
const isObject = (val) => val !== null && typeof val === 'object';

export function reactive(target) {

    const proxy = new Proxy(target, {
        // target:目标对象 key:被获取的键 receiver: Proxy或者继承Proxy的对象
        get(target, key, receiver) {
            // get获取值的时候顺手进行依赖收集
            const res = Reflect.get(target, key, receiver)
            track(target, "get", key);
            // 如果值是个对象 递归
            if (isObject(res)) {
                reactive(res)
            }
            return res
        },
        set(target, key, value, receiver) {

            const result = Reflect.set(target, key, value, receiver);
            trigger(target, "set", key, value);
            //
            return result
        }
    })
    reactiveMap.set(target, proxy)
    return proxy
}


export function mount(instance, el) {
    // 先清空容器内容
    el.innerHTML = ''
    effect(function () {
        instance.$data && update(el, instance);
    })
    instance.$data = instance.setup();
    // 执行一次render
    update(el, instance);
}

function update(container, instance) {
    const vnode = instance.render()

    patch(container._vnode || null, vnode, container)
    container._vnode = vnode
}

function patch(vnode, newVnode, container) {
    // 如果两次一样 直接返回
    if (vnode === newVnode) {
        return;
    }
    // 首次挂载
    if (vnode == null) {
        let el = newVnode.el = document.createElement(newVnode.tagName)
        console.log(newVnode)
        // 如果子节点是数组 递归挂载
        if (Array.isArray(newVnode.children)) {
            newVnode.children.forEach(c => {
                patch(null, c, el)
            })
        } else {
            el.textContent = newVnode.children
        }

        if (newVnode.props && newVnode.props.onClick) {
            el.addEventListener('click', newVnode.props.onClick)
        }

        container.appendChild(el)
    } else {
        //不是首次挂载 对比更新
        const el = (newVnode.el = vnode.el)
        if (Array.isArray(newVnode.children)) {
            newVnode.children.forEach((c, idx) => {
                patch(vnode.children[idx], c, el)
            })
        } else {
		if (vnode.children == newVnode.children) {
			return
		 }
            el.textContent = newVnode.children
        }
    }
}

function h(tagName, props, children) {
    const vnode = {
        tagName,
        props,
        children,
        el: null
    }

    return vnode
}
```
```js
import { reactive, h } from './index.js'
const App = {
    $data: null,
    setup() {
        let count = reactive({num: 0})

        const handleClick = () => {
            count.num++
        }

        return {
            count,
            handleClick
        };
    },
    render() {

        // `
        //     <div>
        //         <p>{{count.num}}</p>
        //         <button @click="handleClick"> ADD </button>
        //     </div>
        // `

        // 
        const _ctx = this.$data
        const _cache = []

        return h('div', null, [
            h('p', null, _ctx.count.num),
            h('button', {
                onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
            }, 'ADD')
        ])
    }
}

mount(App, document.body)
```

## 浏览器上跑一下看效果

![2021-11-09 20.22.38.gif](https://img.haoolee.com/article/0fd403cn-2021-11-09%2020.22.38.gif)

## 总结

vue3的设计真的是让人眼前一亮 捋顺这些东西也是让人头秃 QAQ 后期有空在把详细的解释注上 

自己动手撸一个简陋版Vue3

# 区别
## NodeList
`NodeList` 对象是节点的集合，通常是由属性，如`Node.childNodes` 和 方法，如`document.querySelectorAll` 返回的  
一般情况下,`NodeList` 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。比如  `document.querySelectorAll `就会返回一个静态` NodeList`,  
在一些情况下，NodeList 是一个实时集合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变化。例如，`Node.childNodes` 是实时的

## HTMLCollection
`HTMLCollection` 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合，还提供了用来从该集合中选择元素的方法和属性,  
`HTMLCollection` 是即时更新的；当其所包含的文档结构发生改变时，它会自动更新。

NodeList和HTMLCollection有什么区别

# DocumentFragment
`DocumentFragment`，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

最常用的方法是使用文档片段作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore 的方法），这种情况下被添加（append）或被插入的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。他就相当于一个虚拟的包裹器 类似于React的 `<></>` 和vue的`<template></template>`,它本身不会存在于DOM树中  
注:  **如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，在插入时会先在文档树中删除该节点，然后再将其插入到指定节点。**

多的不说 上测试
## 测试

需求 : 页面现有一个列表 需要动态添加3000个`<li>`进去  我们分别测试渲染所需要时间
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>documentFragment</title>
</head>
<body>
<button onclick="useAppend()">使用appendChild添加</button>
<button onclick="useFragment()">使用fragment添加</button>
<ul id="list"></ul>
<script>
    const list = document.querySelector('#list')
    const listItem = Array(3000).fill('我是一个li')

    function useAppend() {
        const ts = window.performance.now()
        listItem.forEach(i => {
            const li = document.createElement('li')
            li.innerText = i
            list.appendChild(li)
        })
        const te = window.performance.now()
        console.log(`使用appendChild渲染花费了${te - ts} 毫秒`)
    }

    function useFragment() {
        const ts = window.performance.now()
        const fragment = document.createDocumentFragment()
        listItem.forEach(i => {
            const li = document.createElement('li')
            li.innerText = i
            fragment.appendChild(li)
        });
        const te = window.performance.now()
        list.appendChild(fragment)
        console.log(`使用documentFragment渲染花费了${te - ts} 毫秒`)
    }
</script>
</body>
</html>
```

## 看结果
![image.png](https://img.haoolee.com/article/1bo7qhex-image.png)

![image.png](https://img.haoolee.com/article/2akbrjnj-image.png)

渲染时间相差接近一倍


什么是文档是碎片(DocumentFragment)?有啥用?

# 引子
编程最重要的是什么? 是思想!设计模式中蕴含着很多的编程思想,今天就聊聊一些常用的设计模式吧,以及他们的应用场景示例

## 什么是设计模式
> 设计模式（Design pattern）代表了最佳的实践。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。
**设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性**。

## 常用的设计模式
### 单例模式

单例模式是最简单的设计模式之一, 这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不一定需要实例化该类的对象。

场景示例: `设计一个轻提示组件 消息展示2秒自动消失 多个消息排队展示 `

```js
const Toast = (function () {
    const el = document.createElement('div')
    el.style.cssText = `
        position: fixed;
        left: 50%;
        top: 70%;
        display:none;
        background-color: rgba(0,0,0,.7);
        color: #fff;
        font-size:30px;
        border-radius: 5px;
        padding: 15px 25px; 
	transform: translateX(-50%);
    `
    document.documentElement.appendChild(el)
    let timer;
    const _instence = {
        el,
        // 存储需要展示的文本栈
        toastList: [],
        // 推送提示文本入栈
        showToast(text) {
            this.toastList.push(text)
            if (!timer) this.show()
        },
        show() {
            const text = this.toastList.splice(0, 1)[0]
            if (text !== undefined) {
                el.style.display = 'block'
                el.innerText = text
                timer = setTimeout(() => {
                    this.show()
                }, 2000)
            } else {
                el.innerText = ''
                el.style.display = 'none'
                timer = null
            }
        }
    }

    _instence.__proto__ = Toast.prototype

    function Toast() {
        return _instence
    }

    return Toast
})()

const toast = new Toast()
const toast1 = new Toast()

console.log(toast == toast1) // true


```
效果示意:
![2021-11-02 13.56.45.gif](https://img.haoolee.com/article/76snvvra-2021-11-02%2013.56.45.gif)

### 观察者模式

当对象间存在一对多关系时，则使用观察者模式。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。

场景示例: '仿照vue实现双向数据绑定'

么空写 等闲下来再写
```js
```