在前端开发中。设计模式是解决重复问题的 “通用模板”—— 它不直接提供可运行的代码，却能指导我们写出更易维护、可 的逻辑。按理说，是在大型项目中，合理运用设计模式能让代码结构更清晰，协作效率翻倍。

今天就带大家手撕前端最常用的7种设计模式。每种模式都从 “主要思想→实际使用场景→完整代码实现” 三个维度拆解，结合Vue、Axios等大家熟悉的库举例，让抽象的概念落地到真实开发中。

一、工厂模式：批量创建相似对象的 “生产线”

主要思想

工厂模式的本质是用一个函数封装对象的创建逻辑外界无需关心对象的具体构造细节，只需调用工厂方法即可获取实例。说起来，就像工厂生产产品，你要一个 “手机”。工厂直接给你成品，不用管芯片、屏幕怎么组装。

前端使用场景

• 痛点1：重复创建类似对象时代码冗余
• 痛点2：直接new导致耦合度高
• Vue3 的createApp通过createApp.mount创建 Vue 实例。无需手动 new Vue，内部封装了实例初始化逻辑。
• Axios 的axios.create基于自定义配置创建新的 axios 实例，避免全局配置污染。
• 痛点3：组件库弹窗管理复杂
• 组件库中的 “弹窗工厂”：批量创建不同类型的弹窗，统一管理样式和行为。

代码实现这方面，简易 Axios 工厂

// 模拟Axios工厂：根据配置创建请求实例
class AxiosFactory {
// . 用静态方法作为公共接口
static create {
// 默认配置
const defaultConfig = {
baseURL: ''。timeout: 10000,headers: { 'Content-Type': 'application/json' }
};
// 合并使用者配置与默认配置
const finalConfig = { ...defaultConfig,...config };// 封装请求方法
const request = async => {
const { url。method = 'GET',data = {} } = options;try {
const response = await fetch(`${finalConfig.baseURL}${url}`,{
method。headers: finalConfig.headers,timeout: finalConfig.timeout,body: method === 'POST'?JSON.stringify : null
});return await response.json;} catch {
console.error;throw err，}
};// 返回封装后的请求实例
return {
至于get。=> request,post: => request
};

}
}

// . 使用场景演示
// 使用者API服务 - 不同baseURL和超时时间
const userApi = AxiosFactory.create({
baseURL: 'https://api.user.com',timeout: 8千
});

// 商品API服务 - 不同baseURL和headers
const orderApi = AxiosFactory.create({
baseURL: 'https://api.order.com',headers: { Authorization: 'Bearer token123' }
});

// 调用示例 - 不关心内部如何处理请求参数和响应数据转换
userApi.get.n);orderApi.post;

二、单例模式：确保全局只有一个实例

消除重复初始化

至于常见痛点。


多次new导致内存浪费

状态不一致风险

难以管理全局共享数据


主流框架中的应用：


从全局状态管理来看，整个应用只有一个Store实例。

弹窗组件这方面，多次调用不会重复渲染DOM。

EventBus事件总线。


javascript hljs language-JavaScript" lang="JavaScript"
class Singleton {
// . 私有属性存储唯一实例
static #instance;

constructor {
if {
throw new Error;
}
 // 初始化一次性资源
this.initResource;

}

initResource {
console.log;话说回来，}

static getInstance {
if {
Singleton.#instance = new Singleton;}
return Singleton.#instance;}
}

// 项目入口处初始化单例
const appSingleton = Singleton.getInstance;

// 其他文件引入使用:
import singleton from './singleton';const sameInstance = singleton;怎么说呢，// 必须与appSingleton相同!

三、观察者模式：“一对多”的依赖通知机制

前端场景分析

至于常见问题，


跨组件通信繁琐

状态变更触发视图更新效率低

事件监听回调过多难以维护


javascript hljs language-javascript" lang="javascript"
class EventBusWithMemoryLeakFix extends EventBus {

on {

super.on;

// 添加到监控列表

this._watchList.push;

off {

if{

this._watchList.remove;话说回来，

} else {

function Component{

this.busSubscriptions=;

Component.prototype.destroy=function{

// 自动解除所有订阅防止内存泄漏

for{

bus.off;

sub.callback=null;话说回来，

sub.eventName=null;怎么说呢，

}


四、发布订阅模式 vs.观察者模式

架构级别差异这方面。



特性
观察者模式
发布订阅模式




耦合度
目标知道观察者存在
完全解耦


灵活性
固定关系难

动态添加/移除订阅


事件中心
不需要中间层
必须通过事件中心


典型应用
Vue响应程序
Redux/MobX




javascript hljs language-javascript" lang="javascript"
// Redux中间件示范
function loggerMiddleware{
return next=>action=>{
console.group;console.log，const result=next;console.log);console.groupEnd;return result;}
}

function crashReporterMiddleware{
return next=>action=>{
try{
return next;}catch{
console.error;}
}


五、原型模式 - 对象克隆技术详细说明

从深浅克隆比较来看，

javascript hljs language-javascript" lang="javascript"
function shallowClone{
return Object.assign;}

function deepClone{
if{
return source;}
const target=Array.isArray?:{}，for{
if){
target=deepClone;}}
return target;}

// 测试案例:
const obj={
a:{
b:{
c:'value'
}}};const shallow=shallowClone;shallow.a.b.c='modified';//会影响原obj，

const deep=deepClone;deep.a.b.c='safe';//不会影响原obj，

六、代理模式 - 高级缓存策略调整方法

再看性能敏感场景，

html" lang="html"