当前位置:首页 > JavaScript

js实现工厂

2026-01-31 21:45:27JavaScript

工厂模式的概念

工厂模式是一种创建型设计模式,用于封装对象的创建逻辑,通过统一的接口动态决定实例化哪个类。在 JavaScript 中,工厂模式常用于解耦对象创建过程,提升代码的可维护性和扩展性。

简单工厂模式实现

通过一个函数集中处理不同对象的创建逻辑,根据输入参数返回不同的实例。

function createProduct(type) {
  switch (type) {
    case 'A':
      return new ProductA(); // 假设 ProductA 是已定义的类
    case 'B':
      return new ProductB();
    default:
      throw new Error('Unknown product type');
  }
}

class ProductA {
  operation() {
    return 'Product A';
  }
}

class ProductB {
  operation() {
    return 'Product B';
  }
}

// 使用示例
const product = createProduct('A');
console.log(product.operation()); // 输出: Product A

工厂方法模式实现

定义抽象工厂接口,由子类决定具体实例化的对象类型。

class Factory {
  createProduct() {
    throw new Error('Abstract method must be implemented');
  }
}

class ConcreteFactoryA extends Factory {
  createProduct() {
    return new ProductA();
  }
}

class ConcreteFactoryB extends Factory {
  createProduct() {
    return new ProductB();
  }
}

// 使用示例
const factoryA = new ConcreteFactoryA();
const productA = factoryA.createProduct();
console.log(productA.operation()); // 输出: Product A

抽象工厂模式实现

扩展工厂方法模式,支持创建多个相关或依赖的对象族。

js实现工厂

class AbstractFactory {
  createProductA() {
    throw new Error('Abstract method must be implemented');
  }
  createProductB() {
    throw new Error('Abstract method must be implemented');
  }
}

class ConcreteFactory1 extends AbstractFactory {
  createProductA() {
    return new ProductA1();
  }
  createProductB() {
    return new ProductB1();
  }
}

class ProductA1 {
  operation() {
    return 'Product A1';
  }
}

class ProductB1 {
  operation() {
    return 'Product B1';
  }
}

// 使用示例
const factory1 = new ConcreteFactory1();
const productA1 = factory1.createProductA();
console.log(productA1.operation()); // 输出: Product A1

适用场景

  • 需要动态创建不同类的实例。
  • 对象创建逻辑复杂或需要统一管理。
  • 希望隐藏具体类的实现细节。

通过工厂模式,可以降低代码耦合度,便于后续扩展和维护。

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

相关文章

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inpu…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js实现文字滚动

js实现文字滚动

实现文字滚动的几种方法 使用CSS动画实现滚动 通过CSS的@keyframes和transform属性可以实现平滑的文字滚动效果。 <style> .scroll-text { w…