JavaScript 设计模式之工厂模式

发布于 2021-11-17 12:43:12 字数 2391 浏览 1103 评论 0

所谓的工厂模式,顾名思义就是成批量地生产模式。它的核心作用也是和现实中的工厂一样利用重复的代码最大化地产生效益。在 JavaScript 中,它常常用来生产许许多多相同的实例对象,在代码上做到最大的利用。比如现在有需求是项目中需要创建若干的组件,这些组件分门别类,但是又同属于某些类别下。

这个时候我们不需要直接使用 new 运算符来单个创建,通过简单的代码封装,可以实现创建不同的组件实例。下面我们取简单的例子,创建不同的物种实例。

首先是创建构造函数,区别物种的不同属性。

//定义人的构造函数
var man = function(o) {
    this.foots = o.foot || 2;
    this.legs = o.legs || 2;
}

//定义鱼的构造函数
var fish = function(o) {
    this.qi = o.qi || 4;
    this.foots = o.foots || 9;
}

//定义外星人的构造函数
var et = function(o) {
    this.legs = o.legs ||10;
    this.eyes = o.eyes || 6;
}

接下来我们再创建一个工厂的构造函数:

//工厂函数的构造函数
var F = function() {}
接着在原型上设置它的默认方法:
//f的默认输出实例函数;
F.prototype.vehicleClass = man;

此时,该工厂函数默认生产的是 man 的实例,在不配置的情况下我们产生的是人类的实例,然后我们对 vehicleClass 这个函数进行扩充,生成一个新的函数,此函数可以对不同的类别进行甄别,

//类的甄别函数
F.prototype.vehicleCreate = function(o) {
    switch(o.vehicleType) {
        case 'man' :
            this.vehicleClass = man;
            break;
        case 'fish' :
            this.vehicleClass = fish;
            break;
        case 'et' :
            this.vehicleClass = et;
            break;
        }
    //返回实例
    return this.vehicleClass(o);
}

通过 swith 语句的索引,可以通过 vehicleType 进行不同类的实例化。那么我们看看这个类是如何工作的。首先时实例工厂类.

var Factory = new F();

然后调用 vehicleCreate 方法,通过传参获取不同实例的对象。

var Man = Factory.vehicleCreate({
    vehicleType : 'man',
    legs : 2,
    foots : 2
});

这样,通过 vehicleType 的值,我们可以告诉工厂类我们希望输出的物种,然后通过其他的属性,我们可以控制该物种实例的各种基础属性。

工厂模式适用于以下场景:

  1. 实例对象较复杂。
  2. 多对象的简单,快速的实现。
  3. 跟享元模类似,适用于拥有共同属性的对象。
  4. 只需要满足一个API契约的其他对象的实例对象。

工厂模式实现起来较为简单,不仅仅是工厂模式,几乎所有模式的代码看起来都比较简单。设计模式其实就是把经常用到的代码归纳总结系统的表达而已。在之后的应用中,我们可以系统地去想到这些模式并且运用它们。设计模式更代表的是一种系统思想,而不是重复的代码堆砌。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

倾城泪

暂无简介

0 文章
0 评论
530 人气
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文