javascript抽象工厂模式详细说明

2023-12-09前端开发
13

当面对需要根据用户的选择生成不同的产品时,我们可以使用抽象工厂模式。JavaScript抽象工厂模式是一种用于创建一组相关对象的设计模式,也被称为工厂的工厂。在抽象工厂模式中,我们创建抽象类来指定一组方法来创建一组相关的对象。然后我们创建一个或多个工厂类实现这些抽象方法,并生成一组不同的对象。这使得我们可以将工厂对象集中在一个位置,使得更容易维护和测试。

实现

抽象工厂模式的实现需要考虑以下步骤:

  1. 创建一个抽象基类来定义一些方法,这些方法将被用于创建一组相关的对象。
  2. 创建一个或多个工厂类,实现抽象类中定义的方法。每个工厂类都有一组方法,用于创建不同的对象。
  3. 使用工厂类创建一组相关的对象。

代码示例

下面展示了一个简单的抽象工厂模式的示例。假设我们正在制定一个电子商品购物网站,并且希望根据不同的电子商品类型创建不同的产品:

// 构建抽象工厂方法
class ElectronicsFactory {
    createProduct() {
        throw new Error('需要实现 createProduct 方法');
    }
    createPrice() {
        throw new Error('需要实现 createPrice 方法');
    }
}

// 实现具体商品化方法
class LaptopFactory extends ElectronicsFactory {
    createProduct() {
        return new Laptop();
    }
    createPrice() {
        return new LaptopPrice();
    }
}

class TabletFactory extends ElectronicsFactory {
    createProduct() {
        return new Tablet();
    }
    createPrice() {
        return new TabletPrice();
    }
}

// 构建抽象产品方法
class Product {
    getProductType() {
        throw new Error('需要实现 getProductType 方法');
    }
}

class Price {
    getPrice() {
        throw new Error('需要实现 getPrice 方法');
    }
}

// 具体产品的实现
class Laptop extends Product {
    getProductType() {
        return '笔记本';
    }
}

class Tablet extends Product {
    getProductType() {
        return '平板';
    }
}

class LaptopPrice extends Price {
    getPrice() {
        return '$399';
    }
}

class TabletPrice extends Price {
    getPrice() {
        return '$299';
    }
}

// 使用示例
const laptopFactory = new LaptopFactory();
const laptop = laptopFactory.createProduct();
const laptopPrice = laptopFactory.createPrice();

console.log(laptop.getProductType()); // 输出:笔记本
console.log(laptopPrice.getPrice()); // 输出:$399

const tabletFactory = new TabletFactory();
const tablet = tabletFactory.createProduct();
const tabletPrice = tabletFactory.createPrice();

console.log(tablet.getProductType()); // 输出:平板
console.log(tabletPrice.getPrice()); // 输出:$299

在上面的示例中,我们创建了 ElectronicsFactory 类作为抽象工厂类,定义了 createProduct() 和 createPrice() 作为工厂方法。然后我们根据不同的具体商品类型,实现了 LaptopFactory 和 TabletFactory 两个工厂类。这里的 Laptop 和 Tablet 类则作为抽象产品类,定义了 getProductType() 方法。

最后,在每个工厂类中,我们使用具体产品类型实现了 createProduct() 和 createPrice() 方法来创建具体的商品和价格产品。通过这种方式,我们可以轻松地扩展工厂和产品类型。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

网站部署https后百度地图不显示问题
https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1...
2025-07-28 前端开发
139

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161