Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >深入理解JavaScript系列(28):设计模式之工厂模式

深入理解JavaScript系列(28):设计模式之工厂模式

作者头像
用户4962466
修改于 2020-01-17 01:43:18
修改于 2020-01-17 01:43:18
30800
代码可运行
举报
文章被收录于专栏:我的前端路我的前端路
运行总次数:0
代码可运行

与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。

工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。

正文

下面这个例子中,是应用了工厂方法对第26章构造函数模式代码的改进版本:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var Car = (function () {
    var Car = function (model, year, miles) {
        this.model = model;
        this.year = year;
        this.miles = miles;
    };
    return function (model, year, miles) {
        return new Car(model, year, miles);
    };
})();

var tom = new Car("Tom", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

复制代码

不好理解的话,我们再给一个例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var productManager = {};

productManager.createProductA = function () {
    console.log('ProductA');
}

productManager.createProductB = function () {
    console.log('ProductB');
}

productManager.factory = function (typeType) {
    return new productManager[typeType];
}

productManager.factory("createProductA");

复制代码

如果还不理解的话,那我们就再详细一点咯,假如我们想在网页面里插入一些元素,而这些元素类型不固定,可能是图片,也有可能是连接,甚至可能是文本,根据工厂模式的定义,我们需要定义工厂类和相应的子类,我们先来定义子类的具体实现(也就是子函数):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var page = page || {};
page.dom = page.dom || {};
//子函数1:处理文本
page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};

//子函数2:处理链接
page.dom.Link = function () {
    this.insert = function (where) {
        var link = document.createElement('a');
        link.href = this.url;
        link.appendChild(document.createTextNode(this.url));
        where.appendChild(link);
    };
};

//子函数3:处理图片
page.dom.Image = function () {
    this.insert = function (where) {
        var im = document.createElement('img');
        im.src = this.url;
        where.appendChild(im);
    };
};

复制代码

那么我们如何定义工厂处理函数呢?其实很简单:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
page.dom.factory = function (type) {
    return new page.dom[type];
}

复制代码

使用方式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

复制代码

至此,工厂模式的介绍相信大家都已经了然于心了,我就不再多叙述了。

总结

什么时候使用工厂模式

以下几种情景下工厂模式特别有用:

  • 对象的构建十分复杂
  • 需要依赖具体环境创建不同实例
  • 处理大量具有相同属性的小对象

什么时候不该用工厂模式

不滥用运用工厂模式,有时候仅仅只是给代码增加了不必要的复杂度,同时使得测试难以运行下去。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript设计模式之工厂模式
工厂模式是一种最常用的实例化对象模式,是用工厂方法代替new操作的一种模式。在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创建的对象。因为工厂模式就相当于创建实例对象的new,在JavaScript中通常会使用new关键字来实例化对象,如A: a=new A(), 工厂模式也是用来创建实例对象的,所以以后new时就要多个心眼,是否可以考虑使用工厂模式,虽然这样做,可能多做一些工作,但会给你系统带来更大的可扩展性和尽量少的修改量。
用户6167509
2019/09/04
4180
JS常用的几种设计模式
面试常常问到设计模式,设计模式在实际业务中即使有用到,但是依然感受不到它的存在,往往在框架中会有更多体现,比如vue2源码,内部还是有很多设计思想,比如观察者模式,模版模式等,我们在业务上一些通用的工具类也会用到单例,在大量的条件判断也会考虑策略者模式,这两种用得比较多。好记性不如烂笔头,又重新回顾了一遍设计模式,虽然仅仅掌握了几种熟悉的设计模式,但是希望在复杂的业务上,能想起那些不太常用的设计模式。
Maic
2022/12/21
7880
JS常用的几种设计模式
JavaScript设计模式之工厂模式
为了避免这类错误的发生,在构造函数开始时先判断当前对象this指代的是不是类(Demo)。
FinGet
2019/06/28
3760
读书笔记-JavaScript面向对象编程(三)
第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM   7.3.1 window对象再探(所以JavaScript核心函数也都是window对象的方法)   7.3.2 window.navigator(浏览器信息,如window.navigator.userAgent)   7.3.3 Firebug的备忘功能   7.3.4 window.location(当前页面的URL信息,如设置href属性可实现页面
小古哥
2018/03/08
8400
使用JavaScript学习设计模式
之后紧接着买了这本JavaScript 设计模式核⼼原理与应⽤实践,刚好最近有小册免费学的活动,就赶紧把这篇笔记整理出来了,并且补充了小册子中的没有写到的其余设计模式,学习过程中结合 JavaScript 编写的例子,以便于理解和加深印象。
九旬
2021/04/12
7410
使用JavaScript学习设计模式
设计模式之工厂模式
工厂模式属于创建型设计模式,它用于解耦对象的创建和使用。通常情况下,我们创建对象时需要使用new操作符,但是使用new操作符创建对象会使代码具有耦合性。工厂模式通过提供一个公共的接口,使得我们可以在不暴露对象创建逻辑的情况下创建对象。
用户11397231
2024/12/18
1050
设计模式之工厂模式
JavaScript设计模式-工厂模式
掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb
达达前端
2020/01/15
3610
JavaScript设计模式-工厂模式
JavaScript设计模式总汇
来源 | http://www.fly63.com/article/detial/10063
前端达人
2021/01/27
5860
JavaScript设计模式总汇
设计模式-工厂模式设计与详解
工厂模式(Factory Pattern)是一种常用的创建型设计模式,其核心目的是实现创建对象的接口和具体的实例化分离,通过建立一个工厂类,对实现了同一接口的一些类进行实例的创建,以增加系统的灵活性和可维护性。
Damon小智
2024/05/12
2040
设计模式-工厂模式设计与详解
详细解读设计模式中的工厂模式
昨天我们说了关于Java中的单例模式,以及Spring中单例模式的应用,今天了不起就和大家来聊一下关于工厂模式的相关内容。
Java极客技术
2024/07/31
1490
详细解读设计模式中的工厂模式
《JavaScript设计模式》很有感
之前总听到设计模式很重要,于是发现了一本好书——《JavaScript设计模式》,写的通俗易懂,用一个个故事串起了一整本书,(定义一般都比较晦涩难懂,可以先看看使用场景再回来理解相关定义) 先给个书的链接: JavaScript设计模式-张容铭
前端小哥哥
2023/05/04
3950
JavaScript 设计模式学习第八篇- 工厂模式
工厂模式(Factory Pattern),根据不同的输入返回不同类的实例,一般用来创建同一类对象。工厂方式的主要思想是将对象的创建与对象的实现分离。
越陌度阡
2020/11/26
3240
JavaScript 设计模式学习第八篇- 工厂模式
JavaScript设计模式--简单工厂模式
工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
wfaceboss
2019/04/08
5880
JavaScript设计模式--简单工厂模式
设计模式---工厂模式
简单工厂模式属于类的创新型模式,又叫静态工厂方法模式,它可以根据参数的不同返回不同类的实例,被创建的实例通常都具有共同的父类。
大忽悠爱学习
2021/11/15
3570
设计模式之抽象工厂模式(AbstactFactory )
抽象工厂模式(Abstract Factory Pattern)是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。
海盗船长
2021/12/07
3590
设计模式之抽象工厂模式(AbstactFactory )
实现一个工厂模式
工厂模式是一种创建型设计模式,旨在提供一种方法来实例化对象,而无需直接使用对象的具体实现类。通过工厂模式,客户端可以从工厂对象中请求所需类型的对象,而不需要了解对象的创建细节。
GeekLiHua
2025/01/21
700
Java设计模式:工厂模式之简单工厂、工厂方法、抽象工厂(三)
在软件设计中,工厂模式是一种常见的设计模式,它提供了一种创建对象的最佳方式。通过工厂模式,我们可以将对象的创建逻辑与使用逻辑分离,降低代码的耦合度,提高系统的可扩展性和可维护性。
公众号:码到三十五
2024/03/19
1780
JS 设计模式之工厂模式(创建型)
有一天我写了个员工信息录入系统,起初这个系统开发阶段用户只有我,想怎么玩怎么玩。 于是在创建我这个唯一的用户的时候,可以这么写:
Leophen
2021/06/10
5920
修炼内功之JavaScript设计模式(一)
有一个简单的大局观,造完了火箭,再回归正文,我们的日常生活和工作中的大部分还是需要脚踏实地搬砖的,为了应对不断变换的需求,为了不加班,掌握设计模式的思想可以大大提高我们的搬砖效率。
童欧巴
2020/03/30
6010
修炼内功之JavaScript设计模式(一)
C++一分钟之-设计模式:工厂模式与抽象工厂
在软件工程中,设计模式是一种通用的解决方案,用于解决常见的设计问题。工厂模式和抽象工厂模式是创建型设计模式中的两个重要成员,它们帮助我们创建对象而不需要暴露创建逻辑,同时使系统在不修改现有代码的情况下可以扩展。
Jimaks
2024/07/15
1000
相关推荐
JavaScript设计模式之工厂模式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验