前端常用的【设计模式】和使用场景

设计原则

最重要的：开放封闭原则

• 对扩展开放
• 对修改封闭

工厂模式

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

如 jQuery 的 $ 函数，React 的 createElement 函数

单例模式

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

如 Vuex 和 Redux 的 store，全局唯一的 dialog，modal

• JS 是单线程的，创建单例很简单
• Java 是支持多线程的，创建单例要考虑锁死线程，否则多个线程同时创建，单例就重复了(多线程共享进程内存)

代理模式

使用者不能直接访问对象，而是访问一个代理层，在代理层可以监听 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);
  }
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

观察者模式

发布订阅模式

自定义事件（组件卸载时记得清除，避免内存泄漏）

装饰器模式

原功能不变，增加一些新功能(AOP 面向切面编程)

如 ES和Typescript 的 Decorator 语法：类装饰器，方法装饰器

登录后复制

@testable
class MyTestableClass {
  // ...
}

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

MyTestableClass.isTestable // true

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11651363