广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript工厂模式详解
  • 630
分享到

JavaScript工厂模式详解

2024-04-02 19:04:59 630人浏览 泡泡鱼
摘要

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

简单工厂模式(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);

在这里插入图片描述

在这里插入图片描述

总结

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

--结束END--

本文标题: JavaScript工厂模式详解

本文链接: https://www.lsjlt.com/news/137905.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript工厂模式详解
    目录简单工厂模式(Simple Factory)工厂方法模式(Factory Method)安全的工厂方法抽象工厂模式(Abstract Factory)总结简单工厂模式(Simpl...
    99+
    2022-11-12
  • Java工厂模式之简单工厂,工厂方法,抽象工厂模式详解
    目录1、简单工厂模式1.定义2.代码案例3.适用场景4.优缺点2、工厂方法模式1.定义2.代码案例3.适用场景4.优缺点3、抽象工厂模式1.定义2.代码案例3.适用场景4.优缺点4、...
    99+
    2022-11-13
  • PHP设计模式之工厂模式详解
    工厂模式是一种创建型设计模式,它提供了一种统一的方式来创建对象,而不用直接实例化对象。工厂模式可以隐藏对象创建的细节,客户端只需要调...
    99+
    2023-08-14
    php
  • java设计模式--三种工厂模式详解
    目录简单工厂代码:1.产品接口2.产品接口实现子类3.简单工厂类4.调用工厂5.测试工厂方法代码:1.工厂接口2.工厂实现子类3.产品接口4.产品实现子类5.调用6.测试1.产品接口...
    99+
    2022-11-12
  • Java设计模式——工厂设计模式详解
    工厂模式:主要用来实例化有共同接口的类,工厂模式可以动态决定应该实例化那一个类。工厂模式的形态工厂模式主要用一下几种形态:简单工厂(Simple Factory)。2:工厂方法(Factory Method)。3:抽象工厂(Abstract...
    99+
    2023-05-30
    java 设计模式 ava
  • javascript设计模式之工厂模式
    目录介绍UML类图工厂模式的场景总结介绍 将new操作单独封装遇到new时,就要考虑是否应该使用工厂模式比如买汉堡:直接点餐、取餐,我们不会亲手做,商店要“封装&rdqu...
    99+
    2022-11-12
  • python设计模式之抽象工厂模式详解
    抽象工厂模式(Abstract Factory Pattern):属于创建型模式,它提供了一种创建对象的最佳方式。在抽象工厂模式中,接口是负责创建一个相关对象的工厂,不需要显式指定它...
    99+
    2022-11-12
  • Java设计模式之抽象工厂模式详解
    目录一、什么是抽象工厂模式二、示例程序三、UML一、什么是抽象工厂模式 为创建一组相关或相互依赖的对象提供一个接口,而且无需指定他们的具体类,这称之为抽象工厂模式(Abstract ...
    99+
    2022-11-12
  • Java设计模式之工厂模式案例详解
    目录分类案例需求方案一:简单工厂模式方案二:工厂方法模式方案三:抽象工厂模式对比分析总结 分类 1.简单工厂模式 2.工厂方法模式 3.抽象工厂模式 案例 需求 根据蛋糕的不同口味,...
    99+
    2022-11-13
  • PHP设计模式中工厂模式深入详解
    目录简介简单工厂作用适用场景优点缺点代码工厂模式作用适用场景优点缺点代码抽象工厂作用适用场景优点缺点代码三者对比简介 工厂模式属于创建型模式,可以分为三种:简单工厂、工厂模式、抽象工...
    99+
    2022-11-13
    PHP工厂模式 PHP设计模式
  • Java设计模式之工厂方法模式详解
    目录1.工厂方法是什么2.如何实现3.代码实现4.工厂方法模式的优点5.拓展1.工厂方法是什么 众所周知,工厂是生产产品的,并且产品供消费者使用。消费者不必关心产品的生产过程,只需要...
    99+
    2022-11-13
  • java设计模式之简单工厂模式详解
    简单工厂模式:由一个工厂对象决定创建出哪一种类的实例。抽象类public abstract class People { public abstract void doSth();}...
    99+
    2023-05-31
    java 设计模式 简单工厂
  • java 单例模式和工厂模式实例详解
    单例模式根据实例化对象时机的不同分为两种:一种是饿汉式单例,一种是懒汉式单例。私有的构造方法指向自己实例的私有静态引用以自己实例为返回值的静态的公有的方法饿汉式单例 public class Singleton { private ...
    99+
    2023-05-31
    java 单例模式 工厂模式
  • 什么是Javascript工厂模式
    这篇文章主要介绍“什么是Javascript工厂模式”,在日常操作中,相信很多人在什么是Javascript工厂模式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”什么是Jav...
    99+
    2022-10-19
  • Java工厂设计模式课程详解
    工厂模式是Java中最常用的设计模式之一。 这种类型的设计模式属于创建模式,因为此模式提供了创建对象的最佳方法之一。 在工厂模式中,我们没有创建逻辑暴露给客户端创建对象,并使用一个通用的接口引用新创建的对象。 (推荐学习:jav...
    99+
    2016-01-06
    java教程 Java
  • Java简单工厂模式详细解释
    目录简单工厂模式概述简单工厂模式的结构与实现结构:实现简单工厂模式的简化简单工厂模式的优缺点和适用环境简单工厂模式的优点简单工厂模式的缺点简单工厂模式的适用环境简单案例题目:UML:...
    99+
    2022-11-12
  • 详解Java项目中的工厂模式
    详解Java项目中的工厂模式?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 简单工厂模式    当需要加法类的时候,调用工厂类的CreateOperate(),要指定制造的...
    99+
    2023-05-31
    工厂模式 java ava
  • 简单工厂模式和抽象工厂模式
    简单工厂模式,顾名思义,就是比较简单的一个模式,并且使用在业务比较简单的情况下,且具体产品不需要扩张它由三种角色组成工厂类,是这个模式的核心,含有一定的逻辑和判断,根据逻辑不同,产生具体的工厂产品抽象产品:具体产品的父类具体产品:工具抽象产...
    99+
    2023-06-02
  • JAVA设计模式之工厂模式(三种工厂模式)
    1.工厂模式可以分为三类: 简单工厂模式(Simple Factory) 工厂方法模式(Factory Method) 抽象工厂模式(Abstract Factory) 简单工厂其实不是一个标准的的设计模式。GOF 23 种设计模式...
    99+
    2023-09-04
    设计模式
  • java设计模式之工厂方法详解
    一、概念         工厂方法模式是类的创建模式,又叫虚拟构造子模式(virtual constructor) 或者多态性工厂模式。二、模式动机 ...
    99+
    2023-05-31
    java 设计模式 工厂方法
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作