JavaScript设计模式(四):出现的都是幻觉-抽象工厂模式

简介: 出现的都是幻觉-抽象工厂模式

抽象工厂模式(Abstract Factory)

通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。

⚠ 注意:抽象方法只负责告诉开发者要实现什么方法,并不负责真正的逻辑处理,可以理解为子类要实现所定义功能的模板

示例:

// 抽象类

/**
 * 抽象工厂方法 - 寄生式继承
 * @param {Class} subType       子类
 * @param {Class} superType     父类
 */
var VehicleFactory = function (subType, superType) {
   
    // 判断抽象工厂中是否有该抽象类
    if (typeof VehicleFactory[superType] === 'function') {
   
        // 缓存类
        function F() {
    };
        // 继承父类属性和方法
        F.prototype = new VehicleFactory[superType]();
        // 将子类constructor指向子类
        subType.constructor = subType;
        // 子类原型继承“父类”
        subType.prototype = new F();
    } else {
   
        // 不存在该抽象类抛出错误
        throw new Error('未创建该抽象类');
    }
}

/**
 * 小汽车父抽象类
 *      如果定义的子类继承自小汽车就需要实现 getPrice getSpeed 方法,否则调用报错
 */
VehicleFactory.Car = function () {
    this.type = '【父类】小汽车'; };
VehicleFactory.Car.prototype.getPrice = function () {
    return new Error('您尚未定义此方法,请定义后在调用!'); };
VehicleFactory.Car.prototype.getSpeed = function () {
    return new Error('您尚未定义此方法,请定义后在调用!'); };

/**
 * 公交车父抽象类
 *      如果定义的子类继承自公交车就需要实现 getPrice getPassengerNum 方法,否则调用报错
 */
VehicleFactory.Bus = function () {
    this.type = '【父类】公交车'; };
VehicleFactory.Bus.prototype.getPrice = function () {
    return new Error('您尚未定义此方法,请定义后在调用!'); };
VehicleFactory.Bus.prototype.getPassengerNum = function () {
    return new Error('您尚未定义此方法,请定义后在调用!'); };
// 实例1:

/**
 * 宝马 - 小汽车的子类
 * @param {number} price 价格(单位万)
 * @param {number} speed 速度(单位km/h)
 */
let BMW = function (price, speed) {
   
    this.type = '【子类】宝马';
    this.price = price;
    this.speed = speed;
};
VehicleFactory(BMW, 'Car'); // 'Car' ---> VehicleFactory.Car
BMW.prototype.getPrice = function () {
    return this.price; };
let bmw = new BMW(30, 120);
console.log(bmw.getPrice()); // 30
console.log(bmw.getSpeed()); // Error: 您尚未定义此方法,请定义后在调用!
// 实例2:

/**
 * 兰博基尼 - 小汽车的子类
 * @param {number} price 价格(单位万)
 * @param {number} speed 速度(单位km/h)
 */
let Lamborghini = function (price, speed) {
   
    this.type = '【子类】兰博基尼';
    this.price = price;
    this.speed = speed;
};
VehicleFactory(Lamborghini, 'Car'); // 'Car' ---> VehicleFactory.Car
Lamborghini.prototype.getPrice = function () {
    return this.price; };
Lamborghini.prototype.getSpeed = function () {
    return this.speed; };
let lamborghini = new Lamborghini(130, 260);
console.log(lamborghini.getPrice()); // 130
console.log(lamborghini.getSpeed()); // 260
// 实例3:

/**
 * 宇通客车 - 公交车的子类
 * @param {number} price 价格(单位万)
 * @param {number} count 限乘(单位人)
 */
let Yutong = function (price, count) {
   
    this.type = '【子类】宇通客车';
    this.price = price;
    this.count = count;
};
VehicleFactory(Yutong, 'Bus'); // 'Bus' ---> VehicleFactory.Bus
Yutong.prototype.getPrice = function () {
    return this.price; };
Yutong.prototype.getPassengerNum = function () {
    return this.count; };
Yutong.prototype.getOtherFun = function () {
    return '其他方法···'; };
let yutong = new Yutong(15, 24);
console.log(yutong.getPrice());         // 15
console.log(yutong.getPassengerNum());  // 24
console.log(yutong.getOtherFun());      // 其他方法···
目录
相关文章
|
1月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
29 8
|
2月前
|
设计模式
「全网最细 + 实战源码案例」设计模式——抽象工厂模式
抽象工厂模式是一种创建型设计模式,提供接口用于创建一系列相关或依赖的对象,无需指定具体类。它解决了产品族问题,管理和创建一组相关产品。结构上包括抽象工厂、具体工厂、抽象产品和具体产品。适用于创建相关对象、产品族固定但种类变化的场景。优点是分离接口与实现、管理产品族方便且扩展性好;缺点是产品族扩展困难且代码复杂度增加。通过配置文件和反射机制可进一步改进,使系统更灵活易扩展。
76 17
|
2月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
123 33
|
8月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
98 8
|
8月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
99 7
|
4月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
67 2
|
5月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
55 3
|
6月前
|
设计模式 Java
Java设计模式-抽象工厂模式(5)
Java设计模式-抽象工厂模式(5)
|
7月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
102 1
|
7月前
|
设计模式 Java
Java 设计模式之谜:工厂模式与抽象工厂模式究竟隐藏着怎样的神奇力量?
【8月更文挑战第30天】在Java编程中,设计模式为常见问题提供了高效解决方案。工厂模式与抽象工厂模式是常用的对象创建型设计模式,能显著提升代码的灵活性、可维护性和可扩展性。工厂模式通过定义创建对象的接口让子类决定实例化哪个类;而抽象工厂模式则进一步提供了一个创建一系列相关或相互依赖对象的接口,无需指定具体类。这种方式使得系统更易于扩展和维护。
56 1

热门文章

最新文章