前端常用的设计模式

设计原则：开放封闭原则，对扩展开放，对修改封闭

1. 工厂模式

1. 原理 用一个工厂函数创建实例，隐藏 new

function factory(a,b,c){
    // 程序逻辑
    retrn new Foo()
}

const f1 = factory(1,2,3)

1. 场景：jquery 的$

2. 单例模式

1. 原理：全局唯一的实例（无法生成第二个），即：单例的类不可以直接被实例化，只能通过内部的静态方法返回实例

class Single {
  // 定义静态变量，用于判断当前实例是否存在
  static instance = null;
  constructor() {}
  static getInstance() {
    // 实例不存在则创建，实例存在则返回实例，反正保证全局唯一实例即可
    if (this.instance == null) {
      this.instance = new Single();
    }
    return this.instance;
  }
}

const s1 = Single.getInstance();
const s2 = Single.getInstance();
console.log("====================================");
console.log(s1 === s2); // true
console.log("====================================");

1. 场景：vuex、redux 的 store，全局的 dialog，modal

3. 代理模式

1. 原理：访问者不能直接访问一个对象，而是访问对象的代理对象，可以利用代理对象的钩子做很多事，比如数据拦截
2. 场景：vue3 的 proxy

4. 观察者模式

1. 原理：一个主体一个观察者，主体变化会触发观察者
2. 场景：el.addeventListener()

5. 发布订阅模式

1. 原理：订阅、发布
2. 场景：this.$on 和 this.$emit

6. 装饰器模式

1. 原理：不改变累的原来功能，在其基础上进行拓展
2. 场景：nest

7. 代理模式

二、观察者模式和发布订阅模式有什么区别？

1. 观察者模式 直接给元素绑定观察者
2. 发布订阅模式 发布和订阅不是直接联系的，需要事件作为中间媒介