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

设计原则

最重要的：开放封闭原则

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

工厂模式

用一个工厂函数，来创建实例，隐藏 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);}
});

观察者模式

发布订阅模式

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

装饰器模式

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

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

@testable
class MyTestableClass {// ...
}function testable(target) {target.isTestable = true;
}MyTestableClass.isTestable // true