一、前端框架常见设计模式
（一）单例模式 定义与原理 单例模式确保一个类只有一个实例，并提供一个全局访问点来访问这个实例。在前端框架中，比如在某些场景下，全局状态管理库可能会采用单例模式。
例如，在一个 Vue 项目中，使用 Vuex 进行状态管理时，整个应用通常只有一个 Vuex 实例来存储和管理全局状态。
优点
可以节省系统资源，因为只有一个实例存在，避免了重复创建对象造成的资源浪费。例如，在单页应用中，一个统一的路由管理器如果采用单例模式，就不会因为多次创建路由对象而占用过多内存。 提供了一个全局的访问点，方便在不同组件间共享数据和状态。就像在 React 应用中，使用 Context API 实现的某些全局数据共享机制，在某种程度上类似于单例模式的思想，它使得数据在组件树中能够方便地传递。
缺点
单例模式可能会导致代码的耦合性增加。因为所有依赖这个单例的模块都直接与它相关联，如果单例对象的实现发生改变，可能会影响到多个模块。例如，如果对全局状态管理库的内部结构进行修改，可能会影响到所有使用该状态的组件。
单例模式在多线程环境下（虽然前端 JavaScript 是单线程，但在某些如 Web Worker 等场景下可能涉及多线程概念）可能会出现线程安全问题，需要额外的处理机制。
（二）观察者模式
定义与原理
观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。当主题对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。在前端框架中，事件监听机制就是典型的观察者模式应用。
例如，在浏览器中，当用户点击一个按钮（按钮是被观察对象），所有注册了该按钮点击事件的函数（观察者）都会被触发执行。
优点
实现了对象间的松散耦合。主题对象和观察者对象不需要知道彼此的具体实现细节，只需要遵循约定的接口。在前端开发中，比如在一个基于事件驱动的 JavaScript 库中，不同的模块可以通过事件机制进行交互，而无需深入了解其他模块的内部结构。
可以很方便地添加和删除观察者。在前端应用中，如果一个组件需要对某个事件做出响应，它可以很容易地注册为观察者；当不再需要响应时，也可以轻松地取消注册。
缺点
当存在大量观察者时，通知的开销可能会比较大。例如，在一个复杂的前端应用中，如果有很多组件都注册了同一个全局事件，每次该事件触发时，都需要遍历所有的观察者进行通知，可能会影响性能。 可能会导致意外的更新。如果在观察者中存在一些复杂的逻辑，可能会因为错误的事件触发或者错误的逻辑处理，导致不期望的更新行为。
（三）工厂模式
定义与原理
工厂模式是一种创建对象的设计模式，它提供了一种创建对象的方式，将对象的创建和使用分离。在前端框架中，例如创建 DOM 元素时，可以使用工厂模式的思想。
比如，在一个 JavaScript 库中，有一个函数专门负责根据传入的参数创建不同类型的 UI 组件，如按钮、输入框等，这就是工厂模式的体现。
优点
代码的复用性高。通过工厂函数，可以在多个地方复用创建对象的逻辑。例如，在一个大型的前端项目中，有多个地方需要创建相似类型的表单元素，通过工厂函数可以统一创建逻辑，减少代码重复。
代码的可维护性好。如果需要对创建对象的逻辑进行修改，只需要在工厂函数中进行修改，而不需要在每个创建对象的地方进行修改。
缺点
可能会导致工厂函数过于复杂。如果需要创建的对象类型过多，或者创建对象的逻辑过于复杂，工厂函数可能会变得庞大而难以维护。例如，在一个要创建多种不同样式和功能的复杂 UI 组件的工厂函数中，函数内部的逻辑可能会变得非常复杂。
对于简单的对象创建场景，使用工厂模式可能会显得过于繁琐，增加不必要的代码量。
二、设计模式对比与案例分析
（一）单例模式与工厂模式对比
目的不同
单例模式侧重于确保只有一个实例存在，主要用于全局资源管理等场景。例如在一个小型的前端应用中，一个用于管理应用配置的对象采用单例模式，保证整个应用只有一套配置数据。
工厂模式侧重于对象的创建，将对象的创建过程封装起来。比如在一个基于组件的前端框架中，有一个工厂函数负责创建不同类型的组件，每个组件可以有多个实例。
使用场景差异
单例模式适合在需要全局共享且唯一的数据或对象管理场景。例如在一个具有全局主题设置的前端应用中，主题管理器采用单例模式，保证整个应用的主题风格统一且只有一个管理实例。
工厂模式适合在需要批量创建相似但可能有差异的对象的场景。例如在一个数据可视化的前端项目中，有一个工厂函数用于创建不同类型的图表组件（柱状图、折线图等），这些图表组件有相似的创建基础但有不同的表现形式。
（二）观察者模式与单例模式对比
关系不同
观察者模式强调的是对象间的依赖和通知关系，是一种多对一的关系结构。例如在一个实时聊天的前端应用中，当有新消息到来（被观察对象状态改变），所有相关的聊天窗口（观察者）都要更新显示新消息。
单例模式强调的是对象的唯一性，是一种自身的存在形式。如在一个前端框架的全局错误处理机制中，采用单例模式的错误处理对象可以统一处理应用中的各种错误。
应用场景区别
观察者模式在事件驱动、异步操作等场景中应用广泛。例如在一个前端的文件上传组件中，当文件上传进度更新（事件）时，所有关注上传进度的 UI 元素（观察者）都要更新显示，这就适合用观察者模式。
单例模式在全局资源控制、共享配置等场景更为适用。例如在一个具有多页面的前端应用中，一个单例的用户登录状态管理对象可以在整个应用中管理用户的登录状态。
在前端框架开发中，选择合适的设计模式至关重要。要根据具体的业务需求、性能要求和代码结构来综合考虑。在实际项目中，可能会同时使用多种设计模式来构建一个高效、可维护的前端应用。例如，在一个大型的电商前端应用中，可能会使用单例模式来管理全局的购物车数据，使用工厂模式来创建各种商品展示组件，使用观察者模式来处理用户操作事件（如点击加入购物车按钮）引发的界面更新等操作。这样可以充分发挥不同设计模式的优势，打造出优质的前端体验。
