前端6种常见设计模式及其应用场景

目录

工厂模式

单例模式

观察者模式

发布订阅模式

装饰器模式

代理模式

---

工厂模式

用工厂函数创建实例，隐藏 new

如 jQuery $ 函数、React createElement 函数

 

单例模式

全局唯一的实例，无法生成第二个

如 Vuex Redux 的 store、全局唯一的 dialog modal

注意：因为 JS 是单线程的，所以创建单例很简单，对于 java 等多线程语言，创建单例要考虑锁死线程问题，否则多个线程同时创建就重复了

 

观察者模式

如监听 DOM 事件

btn.addEventListener("click", function() {
    // ...
})

发布订阅模式

如自定义事件

注意：绑定事件要记得解除，防止内存泄漏

观察者模式和发布订阅模式的区别：观察者模式 subject 和 observer 直接绑定，没有中间媒介；发布订阅模式 publisher 和 observer 互不认识，需要中间媒介 event channel

装饰器模式

原功能不变，增加一些新功能

如 ES 和 TS 的 Decorator

类装饰器

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

方法装饰器

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

代理模式

使用者不能直接访问对象，而是访问代理层，在代理层监听 get、set 做很多事情

如 ES6 Proxy 实现 vue3 响应式

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});