JavaScript工厂模式详解

目录
  • 简单工厂模式(Simple Factory)
  • 工厂方法模式(Factory Method)
    • 安全的工厂方法
  • 抽象工厂模式(Abstract Factory)
  • 总结

简单工厂模式(Simple Factory)

//篮球基类
var Basketball = function() {
    this.intro = '篮球盛行于美国';
}
Basketball.prototype = {
    getMember: function() {
        console.log('每个队伍需要五个队员');
    },
    getBallSize: function() {
        console.log('篮球很大');
    }
}
//足球基类
var Football = function() {
    this.intro = '足球在世界范围内都很流行';
}
Football.prototype = {
    getMember: function() {
        console.log('每个队伍需要11名队员');
    },
    getBallSize: function() {
        console.log('足球很大');
    }
}
//运动工厂
var SportsFactory = function(name) {
    switch (name) {
        case 'NBA':
            return new Basketball();
        case 'worldCup':
            return new Football();
    }
}
//当你需要为世界杯创建一个足球的时候,只需要记住运功工厂sportsFactory即可,调用并创建
var Footnall = SportsFactory('worldCup');
console.log(Footnall);
console.log(Footnall.intro);
Footnall.getMember();

//工厂模式
function createBook(name, time, type) {
    var o = new Object(); //创建一个对象,并对对象拓展属性和方法
    //这是不相似的部分
    o.name = name; //书本名称
    o.time = time; //书本出版时间
    o.type = type; //书本类型
    //下面是相似的部分
    o.getName = function() {
        console.log(this.name);
    };
    //将对象返回
    return o;
}
//创建两本书
var book1 = new createBook('JS book', 2021, 'js');
var book2 = new createBook('CSS book', 2019, 'css');
book1.getName();
book2.getName();

工厂方法模式(Factory Method)

var Demo = function() {}
Demo.prototype = {
    show: function() {
        console.log('成功获取');
    }
}
var d = new Demo();//正确创建实例
d.show(); //成功获取
var d = Demo();//错误创建实例
d.show(); //炸裂

var Demo = function() {
    if (!this instanceof Demo) {//判断this的指向
        return new Demo();
    }
}
Demo.prototype = {
    show: function() {
        console.log('安全模式类真好用');
    }
}
var d = Demo();
d.show();

安全的工厂方法

//安全模式创建工厂类
var Factory = function(type, content) {
    if (this instanceof Factory) {
        var s = new this[type](content);
        return s;
    } else {
        return new Factory(type, content);
    }
}
//工厂原型中设置创建所有类型数据对象的基类
Factory.prototype = {
    java: function(content) {
        //...
    },
    UI: function(content) {
        this.content = content;
        (function() {
            var div = document.createElement('div');
            div.innerHTML = content;
            div.style.border = '1px soild red';
            document.getElementById('container').appendChild(div);
        })(content);
    },
    php: function(content) {
        //...
    },
    javascript: function(content) {
        //..
    }
};
//创建对象
var data = [
    { type: 'javascript', content: 'js哪家强' },
    { type: 'java', content: 'java哪家强' },
    { type: 'UI', content: 'UI哪家强' }
];
for (let index = 0; index < data.length; index++) {
    console.log(data[index].type);
    Factory(data[index].type, data[index].content);
}

抽象工厂模式(Abstract Factory)

var Car = function() {}
Car.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能调用');
    },
    getSpeed: function() {
        return new Error('抽象方法不能调用');
    }
};

//抽象工厂方法
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('未创建该抽象类');
    }
};
//小汽车抽象类
VehicleFactory.Car = function() {
    this.type = 'car';
}
VehicleFactory.Car.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能调用');
    },
    getSpeed: function() {
        return new Error('抽象方法不能调用');
    }
};
//公交车抽象类
VehicleFactory.Bus = function() {
    this.type = 'bus';
}
VehicleFactory.Bus.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能调用');
    },
    getPassengerNum: function() {
        return new Error('抽象方法不能调用');
    }
}

//抽象与实现
//宝马汽车子类
var BMW = function(price, speed) {
    this.price = price;
    this.speed = speed;
};
//抽象工厂实现对Car抽象类的继承
VehicleFactory(BMW, 'Car');
BMW.prototype.getPrice = function() { //重写方法
    return this.price;
}
BMW.prototype.getSpeed = function() {
    return this.speed;
};
//宇通公交车子类
var YUTONG = function(price, passenger) {
    this.price = price;
    this.passenger = passenger;
};
//抽象工厂实现对BUS抽象类的继承
VehicleFactory(YUTONG, 'Bus');
YUTONG.prototype.getPrice = function() {
    return this.price;
}
YUTONG.prototype.getPassengerNum = function() {
    return this.passenger;
};
//实例化类
var myBMW = new BMW('100w', '1000km/h');
console.log(myBMW.getPrice(), myBMW.getSpeed(), myBMW.type);

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-10-11

javascript设计模式 – 简单工厂模式原理与应用实例分析

本文实例讲述了javascript设计模式 – 简单工厂模式.分享给大家供大家参考,具体如下: 介绍:简单工厂模式是最常用的一类创建型设计模式.其中简单工厂模式并不属于GoF23个经典设计模式,它通常被作为学习其他工厂模式的基础. 定义:定义一个工厂类,它可以根据参数的不同返回不同的实例,被创建的实例通常都具有相同的父类,因为在简单工厂模式中创建实例的方法是静态方法,因此简单工厂模式又被称为静态工厂方法模式,它属于类创建型模式. 场景:我们需要写一个dialog工具类,在项目初期我们只需要考虑一

JavaScript设计模式--简单工厂模式定义与应用案例详解

本文实例讲述了JavaScript设计模式--简单工厂模式定义与应用.分享给大家供大家参考,具体如下: 一,介绍 工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类. 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型. 在这里将工厂简单分为三种: (1)简单工厂:通过第三方的类完成松耦合的任务. (2)复杂工厂:通过把实例化的任务交给子类来完成的,用以到达松耦合的目的. (

javascript设计模式 – 工厂模式原理与应用实例分析

本文实例讲述了javascript设计模式 – 工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:前面我们介绍了简单工厂模式,简单工厂模式存在一个严重的问题:当需要扩展时必定要修改工厂类的源代码.我们虽然在第二个demo中做了一些优化,但是我们需在使用时明确指定执行方法的名字,这无疑提高了使用成本.那如何实现增加新产品而不影响已有代码?工厂模式应运而生. 定义:定义一个用于创建对象的接口,让子类决定将哪一个类实例化.工厂模式让一个类的实例化延迟到其子类.工厂模式又称为工厂方法模式,又可

javascript设计模式 – 抽象工厂模式原理与应用实例分析

本文实例讲述了javascript设计模式 – 抽象工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:基于工厂模式,继续升级.来解决工厂模式存在多个工厂类的问题.主要的思想是将一些相关的产品组成一个产品族,由同一个工厂来统一生产. 定义:抽象工厂模式提供一个创建一系列相关或相互依赖的接口,而无须指定他们具体的类.抽象工厂模式又称kit模式,它是一种对象创建型模式. 场景:还是上面的Dialog类,如果继续向后发展,会有各种各样的弹窗,如果新增一个弹窗包含了notice和toast.这样

JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

本文实例讲述了JavaScript设计模式--简单工厂模式.分享给大家供大家参考,具体如下: 第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //(1)定义一个接口类 var Interface=function (name,methods) {//name:接口名字 if(argument

JS 设计模式之:工厂模式定义与实现方法浅析

本文实例讲述了JS 设计模式之:工厂模式定义与实现方法.分享给大家供大家参考,具体如下: 前言 上次我们介绍了单例模式,没看过的小伙伴可以看这个链接: 浅析 JS 设计模式之:单例模式 今天来说一说一种常见的设计模式:工厂模式. 工厂模式是一种创建对象的 创建型模式,遵循 DRY(Don't Repeat Yourself)原则.在该模式下,代码将会根据具体的输入或其他既定规则,自行决定创建哪种类型的对象.简单点儿说就是,动态返回需要的实例对象. 回顾上次的例子 让我们继续使用单例模式中的例子,

JS 设计模式之:单例模式定义与实现方法浅析

本文实例讲述了JS 设计模式之:单例模式定义与实现方法.分享给大家供大家参考,具体如下: 良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本.笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式. 今天先从最简单的一个入手:单例模式. 文中的示例代码会使用 ES6 语法,尽量简化不必要的细节 概念 单例模式(Singleton)属于创建型的设计模式,它限制我们只能创建单一对象或者某个类的单一实例. 通常情况下,使用该模式是为了控制整个应用程序的状态.在日常的开发中,我们遇到的单例模

JS设计模式之访问者模式定义与用法分析

本文实例讲述了JS设计模式之访问者模式定义与用法.分享给大家供大家参考,具体如下: 在访问者模式中,主要包括下面几个角色 1.抽象访问者:抽象类或者接口,声明访问者可以访问哪些元素,具体到程序中就是visit方法中的参数定义哪些对象是可以被访问的. 2.访问者:实现抽象访问者所声明的方法,它影响到访问者访问到一个类后该干什么,要做什么事情. 3.抽象元素类:接口或者抽象类,声明接受哪一类访问者访问,程序上是通过accept方法中的参数来定义的.抽象元素一般有两类方法,一部分是本身的业务逻辑,另外

PHP设计模式之工厂模式定义与用法详解

本文实例讲述了PHP设计模式之工厂模式定义与用法.分享给大家供大家参考,具体如下: 工厂模式(Factory Design Pattern)作为一种创建型设计模式, 遵循了开放-封闭原则, 对修改封闭, 对扩展开放. 工厂方法(Factory Method)模式就是要创建"某种东西". 对于工厂方法模式, 要创建的"东西"是一个产品,这个产品与创建它的类之间不存在绑定.实际上,为了保持这种松耦合,客户会通过一个工厂发出请求. 再由工厂创建所请求的产品.也可以换种方式

PHP设计模式之工厂模式与单例模式

本文实例讲述了PHP设计模式之工厂模式与单例模式实现方法.分享给大家供大家参考,具体如下: 设计模式简单说应对某类问题而设计的解决方式 工厂模式:应对需求创建相应的对象 class factory{ function __construct($name){ if(file_exists('./'.$name.'.class.php')){ return new $name; }else{ die('not exist'); } } } 单例模式:只创建一个对象的实例,不允许再创建实例,节约资源(

JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析

本文实例讲述了JavaScript设计模式之工厂模式和抽象工厂模式定义与用法.分享给大家供大家参考,具体如下: 1.工厂模式: 虽然Object构造函数和对象字面量都可以用来创建单个对象,但这个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码.为了解决这个问题,开始使用工厂模式. 利用工厂模式,可以实现不指定特定的类而创建出对象,也就是说,不需要使用new关键字来创建特定类或子类的实例. var TravelTeam = function(){}; TravelTeam.pr

PHP设计模式之工厂模式实例总结

本文实例讲述了PHP设计模式之工厂模式.分享给大家供大家参考,具体如下: 使用工厂模式的目的或目标? 工厂模式的最大优点在于创建对象上面,就是把创建对象的过程封装起来,这样随时可以产生一个新的对象. 减少代码进行复制粘帖,耦合关系重,牵一发动其他部分代码. 通俗的说,以前创建一个对象要使用new,现在把这个过程封装起来了. 假设不使用工厂模式:那么很多地方调用类a,代码就会这样子创建一个实例:new a(),假设某天需要把a类的名称修改,意味着很多调用的代码都要修改. 工厂模式的优点就在创建对象

Java设计模式之工厂模式实现方法详解

本文实例讲述了Java设计模式之工厂模式实现方法.分享给大家供大家参考,具体如下: 工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的 工厂模式在分为三类: 1)简单工厂模式(Simple Factory):不利于产生系列产品: 2)工厂方法模式(Factory Method):又称为多形性工厂: 3)抽象工厂模式(Abstract Factory):又称为工具箱,产生产品族,但不利于产生新的产品: 一.简单工厂模式 简单工厂模式又称静态工厂方法模式

Java设计模式之工厂模式

一.场景描述 仪器数据文件的格式包含Pdf.Word.Excel等多种,不同种格式的文件其数据的采集方式不同,因此定义仪器数据采集接口,并定义PDF.Excel等不同的数据采集类实现该接口. 通过工厂类,调用不同的方法,获取不同的仪器数据采集类,调用接口方法即可. 如不使用工厂模式,则需要new不同的采集类对象,使用工厂模式则隐藏了new的创建方式. 如下图所示: 二.示例代码 仪器数据采集接口: package lims.designpatterndemo.factorydemo; publi