当前位置：首页 > news >正文

【前端设计模式讲解】工厂模式

news 来源：原创 2025/5/26 7:56:43

文章目录

前言
一、工厂模式是什么
二、工厂模式代码中实际应用——多支付渠道系统
三、工厂模式"最完美"的实现
四、源码中的工厂模式
- 4.1 Vue/React 源码中的工厂模式
- 4.2 vue-router 源码中的工厂模式
五、工厂模式的优缺点
六、工厂模式的使用场景
总结

前言

掌握设计模式对前端开发者的优势与提升是全方位的，不仅能提高代码质量，还能显著增强工程化思维。

随着AI时代的发展，前端要是还只是停留在公司的业务层面，仍然停留在业务层面的重复劳动，仅仅满足于表单、列表、弹窗的“CRUD循环”，未来发展肯定是不长远的。设计模式正是前端开发者跳出“流水线工程师”陷阱的关键跳板——它不仅是代码优化的工具，更是工程化思维的基石。

未来的前端竞争力，不在于写了多少行重复代码，而在于用工程化思维创造AI难以复制的价值。

一、工厂模式是什么

工厂模式（Factory Pattern），根据不同的输入返回不同类的实例，一般用来创建同一类对象。工厂方式的主要思想是将对象的创建与对象的实现分离。

访问者只需要知道产品名，就可以从工厂获得对应实例；
访问者不关心实例创建过程；

Factory ：工厂，负责返回产品实例；
Product ：产品，访问者从工厂拿到产品实例；

二、工厂模式代码中实际应用——多支付渠道系统

需求场景：

支持支付宝、微信、银联等多种支付方式
每种支付方式有不同的验证逻辑和流程
需要统一支付结果处理
未来可能新增其他支付渠道（如数字货币）

1.定义支付接口（抽象产品）

// 定义支付接口的契约（必须实现的方法和属性）
interface Payment {validate(): boolean;execute(amount: number): PaymentResult;
}type PaymentResult = {success: boolean;transactionId?: string;error?: string;
};

2.实现具体支付类（具体产品）

class Alipay implements Payment {constructor(private config: { appId: string }) {// 构造函数参数使用 private、public 或 protected 修饰符时(参数属性语法糖)// 声明一个同名的类属性（相当于 private config: { appId: string };）// 在构造函数中自动赋值（相当于 this.config = config;）}validate() {return !!this.config.appId; // 简单实现，实际会有更复杂的验证}execute(amount: number) {console.log(`支付宝支付 ${amount} 元`);return { success: true, transactionId: `ali_${Date.now()}`};}
}class WechatPay implements Payment {constructor(private config: { mchId: string }) {}validate() {return /^\d{10}$/.test(this.config.mchId); // 校验商户号格式}execute(amount: number) {console.log(`微信支付 ${amount} 元`);return {success: true,transactionId: `wx_${Date.now()}`};}
}

3.构建支付工厂（核心）

interface IPaymentConfig {alipay: { class: typeof Alipay; config: { appId: string } };wechat: { class: typeof WechatPay; config: { mchId: string } };unionpay: { class: typeof UnionPay, config: { merchantId: string  } }// 可扩展的索引签名[key: string]: { class: new (config: any) => Payment; config: any };
}class PaymentFactory {// 静态配置字典 存储所有支付方式的类和对应的默认配置private static paymentConfig = {alipay: { class: Alipay, config: { appId: '2024xxxx' } },wechat: { class: WechatPay, config: { mchId: '1234567890' } },unionpay: { class: UnionPay, config: { merchantId: '998877' } }};// 工厂方法static createPayment(type: keyof typeof PaymentFactory.paymentConfig): Payment {const { class: PaymentClass, config } = this.paymentConfig[type];return new PaymentClass(config);}// 动态注册新支付方式，允许运行时扩展新的支付方式，无需修改工厂代码。static registerPayment(type: string,PaymentClass: new (config: any) => Payment,defaultConfig: any) {this.paymentConfig[type] = { class: PaymentClass, config: defaultConfig };}
}

4.客户端调用（完全解耦）

// 使用支付系统（完全不需要知道具体实现）
function handlePayment(paymentType: string, amount: number) {try {const payment = PaymentFactory.createPayment(paymentType);if (!payment.validate()) {throw new Error('支付验证失败');}const result = payment.execute(amount);console.log('支付结果:', result);return result;} catch (error) {console.error('支付失败:', error.message);return { success: false, error: error.message };}
}// 调用示例
handlePayment('alipay', 100);

三、工厂模式"最完美"的实现

1.完全符合六大设计原则

设计原则	实现体现	典型代码示例
单一职责原则	每个支付类（如Alipay）独立处理支付逻辑	class Alipay { process() { /* 仅处理支付宝逻辑 */ } }
开闭原则	支付工厂类通过注册机制扩展新支付方式，无需修改核心代码	PaymentFactory.register(‘unionpay’, UnionPay)
里氏替换原则	所有支付类实现统一接口，任意子类可替换父类（如测试时用MockPay替换真实支付）	interface IPayment { process(): void }
接口隔离原则	支付接口拆分为IPaymentProcess和IPaymentQuery，避免强制实现无关方法	interface IPaymentProcess { pay(): void } => 拆分巨型接口
依赖倒置原则	订单服务依赖IPayment抽象接口，而非具体支付实现类	class OrderService { constructor(private payment: IPayment) {} }
迪米特法则(最少知识原则)	客户端仅与PaymentFactory交互，不直接耦合具体支付类	const payment = PaymentFactory.create(‘alipay’)

2.扩展性爆表的动态注册
// 未来新增数字货币支付

class CryptoPayment implements Payment {constructor(private config: { walletAddress: string }) {}validate() { /*...*/ }execute(amount: number) { /*...*/ }
}// 注册新支付方式（无需修改原有代码）
PaymentFactory.registerPayment('crypto', CryptoPayment, {walletAddress: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F'
});

对比直接实例化的优势
传统写法的问题：

// 业务代码中充斥着具体类
if (type === 'alipay') {const payment = new Alipay({ appId: 'xxx' });
} else if (type === 'wechat') {const payment = new WechatPay({ mchId: 'xxx' });
}
// 每次新增支付方式都要修改这里

痛点：

违反开闭原则、配置分散在各处、难以统一添加横切关注点（如日志、监控）

工厂模式解决：

// 业务代码始终保持简洁
const payment = PaymentFactory.createPayment(type);

优势：
修改/扩展支付方式不影响业务代码、配置集中管理、方便添加全局逻辑

四、源码中的工厂模式

4.1 Vue/React 源码中的工厂模式

和原生的 document.createElement 类似，Vue 和 React 这种具有虚拟 DOM树（Virtual Dom Tree）机制的框架在生成虚拟 DOM 的时候，都提供了 createElement 方法用来生成 VNode，用来作为真实 DOM 节点的映射：

// Vue
createElement('h3', { class: 'main-title' }, [createElement('img', { class: 'avatar', attrs: { src: '../avatar.jpg' } }),createElement('p', { class: 'user-desc' }, '长得帅老的快，长得丑活得久')
])// React
React.createElement('h3', { className: 'user-info' },React.createElement('img', { src: '../avatar.jpg', className: 'avatar' }),React.createElement('p', { className: 'user-desc' }, '长得帅老的快，长得丑活得久')
)

createElement 函数结构大概如下：

class Vnode (tag, data, children) { ... }function createElement(tag, data, children) {return new Vnode(tag, data, children)
}

可以看到 createElement 函数内会进行 VNode 的具体创建，创建的过程是很复杂的，而框架提供的 createElement 工厂方法封装了复杂的创建与验证过程，对于使用者来说就很方便了。

4.2 vue-router 源码中的工厂模式

工厂模式在源码中应用频繁，以 vue-router 中的源码为例，代码位置：vue-router/src/index.js

// src/index.js
export default class VueRouter {constructor(options) {this.mode = mode	// 路由模式switch (mode) {           // 简单工厂case 'history':       // history 方式this.history = new HTML5History(this, options.base)breakcase 'hash':          // hash 方式this.history = new HashHistory(this, options.base, this.fallback)breakcase 'abstract':      // abstract 方式this.history = new AbstractHistory(this, options.base)breakdefault:// ... 初始化失败报错}}
}

mode 是路由创建的模式，这里有三种 History、Hash、Abstract。History 是 H5 的路由方式，Hash 是路由中带 # 的路由方式，Abstract 代表非浏览器环境中路由方式，比如 Node、weex 等；this.history 用来保存路由实例，vue-router 中使用了工厂模式的思想来获得响应路由控制类的实例。