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

前言

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

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

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

一、工厂模式是什么

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

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

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

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

需求场景：

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

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.完全符合六大设计原则

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)
                break
            case 'hash':          // hash 方式
                this.history = new HashHistory(this, options.base, this.fallback)
                break
            case 'abstract':      // abstract 方式
                this.history = new AbstractHistory(this, options.base)
                break
            default:
                // ... 初始化失败报错
        }
    }
}

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

五、工厂模式的优缺点

工厂模式的优点：

• 良好的封装，代码结构清晰，访问者无需知道对象的创建流程，特别是创建比较复杂的情况下；
• 扩展性优良，通过工厂方法隔离了用户和创建流程隔离，符合开放封闭原则；
• 解耦了高层逻辑和底层产品类，符合最少知识原则，不需要的就不要去交流；

工厂模式的缺点：

• 带来了额外的系统复杂度，增加了抽象性；

六、工厂模式的使用场景

那么什么时候使用工厂模式呢：

• 对象的创建比较复杂，而访问者无需知道创建的具体流程；
• 处理大量具有相同属性的小对象；

什么时候不该用工厂模式：滥用只是增加了不必要的系统复杂度，过犹不及。

总结

工厂模式的完美实践要素

1. 严格的接口契约 - 所有产品类实现统一接口
2. 集中配置管理 - 避免配置分散在代码各处
3. 注册机制 - 支持运行时动态扩展
4. 错误防御 - 创建过程要有完善的错误处理
5. 增强封装 - 可以在工厂内部添加缓存、监控等能力

这个支付系统案例完美诠释了工厂模式的价值：让你的系统像乐高积木一样，可以随时插拔新功能而不影响原有架构。