当前位置:首页 > JavaScript

js实现工厂

2026-04-05 14:02:03JavaScript

工厂模式概述

工厂模式是一种创建型设计模式,用于封装对象的创建过程,使代码更灵活、可维护。JavaScript中可通过函数或类实现工厂模式,根据输入参数返回不同对象实例。

简单工厂实现

通过函数返回不同对象实例:

function createProduct(type) {
  switch(type) {
    case 'A':
      return { name: 'Product A', price: 100 };
    case 'B':
      return { name: 'Product B', price: 200 };
    default:
      throw new Error('Unknown product type');
  }
}

const productA = createProduct('A');
const productB = createProduct('B');

工厂方法模式

通过子类决定实例化哪个类:

class ProductFactory {
  createProduct() {
    throw new Error('Method must be implemented');
  }
}

class ProductAFactory extends ProductFactory {
  createProduct() {
    return { name: 'Product A', price: 100 };
  }
}

class ProductBFactory extends ProductFactory {
  createProduct() {
    return { name: 'Product B', price: 200 };
  }
}

const factoryA = new ProductAFactory();
const productA = factoryA.createProduct();

抽象工厂模式

创建相关或依赖对象的家族:

class UIFactory {
  createButton() {
    throw new Error('Method must be implemented');
  }
  createDialog() {
    throw new Error('Method must be implemented');
  }
}

class MacFactory extends UIFactory {
  createButton() {
    return { render: () => 'Mac button' };
  }
  createDialog() {
    return { show: () => 'Mac dialog' };
  }
}

class WinFactory extends UIFactory {
  createButton() {
    return { render: () => 'Windows button' };
  }
  createDialog() {
    return { show: () => 'Windows dialog' };
  }
}

const macFactory = new MacFactory();
const macButton = macFactory.createButton();

使用场景

  • 需要创建多种类似对象
  • 对象创建过程复杂
  • 需要解耦对象创建和使用
  • 需要根据不同环境创建不同对象

优缺点分析

优点:

  • 封装创建逻辑
  • 代码可扩展性强
  • 符合单一职责原则
  • 便于单元测试

缺点:

js实现工厂

  • 可能增加代码复杂度
  • 需要创建更多类/函数
  • 对简单对象创建可能过度设计

标签: 工厂js
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callbac…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现路由

js实现路由

js实现路由的方法 在JavaScript中实现路由功能可以通过多种方式完成,以下是几种常见的方法: 使用原生JavaScript实现路由 通过监听window.onhashchange事件来实现基…

js实现原理

js实现原理

JavaScript 实现原理 JavaScript 是一种解释型语言,其实现原理涉及多个核心组件和运行机制,包括引擎、运行时环境、事件循环等。 引擎与解释执行 现代 JavaScript 引擎(如…