前端开发工厂模式的优缺点是什么？-优快云博客

本文链接：https://blog.youkuaiyun.com/liangzai215/article/details/147004469

一、什么是工厂模式？

工厂模式属于创建型设计模式，核心思想是将对象的实例化过程封装到特定方法或类中，让客户端不需要直接通过new关键字创建对象。

举个例子：就像奶茶店不需要顾客自己调配饮品，而是通过"点单-制作"的流程解耦需求与实现。

// 简单工厂示例：按钮组件生成器
interface Button {
  render(): void;
}

class PrimaryButton implements Button {
  render() {
    console.log("渲染蓝色主按钮");
  }
}

class DangerButton implements Button {
  render() {
    console.log("渲染红色警示按钮");
  }
}

// 工厂方法（这里用函数式实现更符合前端习惯）
function createButton(type: 'primary' | 'danger'): Button {
  switch(type) {
    case 'primary':
      return new PrimaryButton();
    case 'danger':
      return new DangerButton();
    default:
      throw new Error("未知按钮类型");
  }
}

// 客户端调用
const submitBtn = createButton('primary');
submitBtn.render(); // 输出：渲染蓝色主按钮

二、工厂模式的三种形态

简单工厂：通过一个方法集中处理所有创建逻辑（适合类型较少的情况）
工厂方法：定义抽象工厂接口，由子类决定实例化哪个类（符合开闭原则）
抽象工厂：创建相关或依赖对象的家族（适合复杂产品线）

三、核心优势

解耦创建逻辑：将易变的创建过程隔离，修改创建逻辑只需调整工厂
类型系统友好：配合接口使用能保证返回对象的一致性
简化复杂创建：隐藏对象初始化时的复杂依赖关系（如需要多个服务注入）

// 工厂方法模式示例：跨平台UI组件
abstract class Dialog {
  abstract createButton(): Button;
  
  render() {
    const button = this.createButton();
    button.render();
  }
}

class WindowsDialog extends Dialog {
  createButton() {
    return new WindowsButton(); // 假设有具体实现
  }
}

class WebDialog extends Dialog {
  createButton() {
    return new HtmlButton(); // 浏览器环境专用按钮
  }
}

// 运行时根据环境选择工厂
const currentDialog = isMobile ? new WebDialog() : new WindowsDialog();
currentDialog.render();

四、典型使用场景

组件库开发：根据不同主题生成样式化的组件
跨平台适配：为不同运行环境生成对应实现
对象池管理：统一管理相似对象的创建和回收
配置驱动UI：根据JSON配置动态生成界面元素

五、必须注意的坑

过度设计警告：如果类型不超过3个，直接switch-case可能更简单
类型扩散问题：每新增一个产品就需要对应工厂，可能造成类爆炸
调试复杂度：代码执行链路变长，需要跳转多个工厂类
实例状态管理：工厂创建的对象如果包含状态需要特别注意生命周期

// 合理使用示例：动态表单控件工厂
class ControlFactory {
  private registry = new Map<string, ControlConstructor>();

  register(type: string, constructor: ControlConstructor) {
    this.registry.set(type, constructor);
  }

  create(type: string, config: ControlConfig) {
    const Constructor = this.registry.get(type);
    if (!Constructor) throw new Error(`未注册的控件类型: ${type}`);
    return new Constructor(config);
  }
}

// 注册自定义控件
factory.register('color-picker', ColorPickerControl);
factory.register('rating', StarRatingControl);

// 根据后端配置动态生成
const configFromAPI = [{ type: 'color-picker', label: '主题色' }];
configFromAPI.forEach(c => {
  const control = factory.create(c.type, c);
  formContainer.appendChild(control.render());
});

六、性能优化策略

对象缓存：对频繁创建且无状态的对象进行复用
惰性加载：推迟创建高消耗对象直到真正需要时
Tree-shaking优化：将不同实现分离到独立模块

// 带缓存的对象池工厂
class ModelPool {
  private pool = new Map<string, THREE.Object3D[]>();

  get(modelName: string) {
    if (!this.pool.has(modelName)) {
      this.pool.set(modelName, []);
    }
    
    const available = this.pool.get(modelName)!.filter(m => !m.visible);
    if (available.length > 0) {
      return available[0];
    }

    const newModel = this.loadModel(modelName);
    this.pool.get(modelName)!.push(newModel);
    return newModel;
  }

  private loadModel(name: string) {
    // 实际加载3D模型的实现
  }
}

七、面试考点解析

当候选人回答该问题时，需重点考察：

是否能区分三种工厂模式的应用场景
能否识别过度使用工厂模式带来的问题
是否具备实际项目中的优化经验
对TypeScript类型系统的运用能力

陷阱问题示例：
"假设需要支持插件系统，允许第三方注册新控件类型，工厂模式该如何改进实现？"

期望答案应涉及：

注册机制的设计
类型安全的实现
生命周期管理
防冲突处理

八、现代前端框架中的实践

React Context + 工厂模式：通过Context传递主题工厂

const ThemeContext = createContext<ButtonFactory>(defaultFactory);

function App() {
  return (
    <ThemeContext.Provider value={materialFactory}>
      <FormPage />  // 内部组件使用统一工厂创建元素
    </ThemeContext.Provider>
  );
}

Vue组合式API工厂：创建可复用的组件逻辑

export function useFormControl(factory: ControlFactory) {
  const controls = ref([]);

  function addControl(config) {
    controls.value.push(factory.create(config));
  }

  return { controls, addControl };
}