设计模式简笔 | 青训营笔记

122 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天。

前端的几个设计模式:

1.设计模式是什么

软件设计中常见问题的解决方案模型。它是历史经验的总结,他与特点的语言无关。

2.23种设计模式
  1. 创建型:如何创建一个对象
  2. 结构型:如何将对象组装成较大的结构
  3. 行为型:负责对象间的通信和职责划分

浏览器中的设计模式
  1. 单例模式
  2. 发布订阅模式
3.单例模式

定义:全局唯一对象

应用场景:缓存,全局状态管理。

意图:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

4.发布订阅模式/观察值模式

定义:一种订阅模式,可以在被订阅对象发生变化通知变化者。

应用场景:从系统架构之间的解耦,到业务中的一些实现模式,像邮件订阅,上线订阅等等,

5.原型模式

复制已有对象来创建新的对象

6.代理模式

定义:可自定义控制对象的访问方式,并且允许在更新后做一些额外处理。

应用场景:监控,代理工具,前端框架的实现。

7.迭代器模式

定义:在不暴露数据类型的情况下访问集合中的数据。

应用场景:数据结构中有多种数据类型,列表,树等, 提供通用的操作接口。

8.组合模式

定义:可多个对象组合使用,也可以单个对象独立使用

应用场景:DOM,前端组件,文件目录。

设计模式:

1.单例模式(Singleton)

他是一个创建型模式,提供了一种对象的获取方式,保证其在一定范围是唯一的。

单例,是隐含了一个范围的,指的是在某个范围内单例,比如在一个上下文中,还是一个房间中,还是一个进程,一个线程中单例,不同场景范围会不同。

class Ball {
  private _instance = undefined// 构造函数申明为 private,就可以阻止 new Ball() 行为
  private constructor() {}
​
  public static getInstance = () => {
    if (this._instance === undefined) {
      this._instance = new Ball()
    }
​
    return this._instance
  }
}
​
// 使用
const ball = Ball.getInstance()