前端常用的设计模式

本文意在对工作中,前端开发经常用到的几种设计模式做一下学习总结

常用的设计模式

  • 工厂模式
  • 单例模式
  • 观察者模式
  • 发布订阅模式

工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 汽车构造函数
function SuzukiCar(color) {
this.color = color;
this.brand = 'Suzuki';
}

// 汽车构造函数
function HondaCar(color) {
this.color = color;
this.brand = 'Honda';
}

// 汽车构造函数
function BMWCar(color) {
this.color = color;
this.brand = 'BMW';
}

// 汽车品牌枚举
const BRANDS = {
suzuki: 1,
honda: 2,
bmw: 3
}

/**
* 汽车工厂
*/
function CarFactory() {
this.create = function (brand, color) {
switch (brand) {
case BRANDS.suzuki:
return new SuzukiCar(color);
case BRANDS.honda:
return new HondaCar(color);
case BRANDS.bmw:
return new BMWCar(color);
default:
break;
}
}

优点:
动态创建对象:可以用于需要在 运行时 确定对象类型的情况。
抽象:封装了对象创建的细节,用户不会接触到对象的构造器,只需要告诉工厂需要哪种对象。
可用性 / 可维护性:将相似的对象用一个工厂管理,提供统一的创建接口,满足 开闭原则,使我们可以轻松添加多种类型的对象,而无需修改大量代码。

单例模式

定义:是保证一个类只有一个实例,并且提供一个访问它的全局访问点。

需求:一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的 window 对象、登录浮窗等。

实现:用一个变量标识当前是否已经为某个类创建过对象,如果是,则在下一次获取这个类的实例时,直接返回之前创建的对象。

优点:

可以用来划分命名空间,减少全局变量的数量
可以被实例化,且实例化一次,再次实例化生成的也是上一个实例

1
2
3
4
5
6
7
8
9
10
const instance = (function() {
let instance = null;
return function(name) {
if (!instance) {
instance = new Singleton(name)
}
return instance;
}
}())

发布订阅模式

订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。

观察者

观察者(Observer)直接订阅(Subscribe)主题(Subject),而当主题被激活的时候,会触发(Fire Event)观察者里的事件。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!