持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情
前端常用的设计模式和使用场景？
设计模式已经有了很多的文章给大家介绍了，本章的目标就是给大家介绍怎么从实际工作中来回答这两个题目，以便大家加深印象。
设计原则
在我们要了解设计模式之前，我们要先了解一下设计原则。我们程序员在写代码之前，都需要进行设计。需求指导设计，设计是指导开发。设计原则有很多，但是最重要的是：
- 开放封闭原则
- 开放：对扩展开放（保证他的扩展性）
- 封闭：对修改封闭（现有的功能保证单一、保证独立、保证原子性）
设计模式
工厂模式
工厂模式：我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。
工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。(本文就不多加赘述了)
例子
jQuery$函数React createElement函数
单例模式
确保一个类仅有一个实例，并提供一个访问它的全局访问点。
例子
- Vuex Redux 的 store
- dialog modal
- 全局对象也是一个很简单的例子
拓展
- js是单线程的，创建单例很简单
- java 是支持多线程的，创建单例要考虑锁死线程
- 多个线程同事创建，单例就重复了
代理模式
为一个对象提供一个代用品或占位符，让使用者不能直接访问对象，而是访问一个代理层，代理层可以监听 get、set做很多事情
例子
- ES6 Proxy 实现 Vue3 响应式
观察者模式
一行代码就能理解：
发布订阅
这两个时间，我们在平常的vue开发中用的很多了，相信大家都很熟悉了 ps： 观察者模式和发布订阅模式详细的话可以看看观察者模式和发布订阅模式
装饰器模式
原功能不变，增加一些新功能
例子
- es 和 ts 的 Decorator 语法 这里推荐阮一峰老师的：装饰器
