脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript设计模式之工厂模式

深入理解JavaScript系列（28）：设计模式之工厂模式详解

 更新时间：2015年03月03日 11:18:29   投稿：junjie  
这篇文章主要介绍了深入理解JavaScript系列（28）：设计模式之工厂模式详解,工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类,需要的朋友可以参考下

介绍

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

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

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

正文

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

复制代码 代码如下:

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);

不好理解的话，我们再给一个例子：

复制代码 代码如下:

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");

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

复制代码 代码如下:

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);
    };
};

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

复制代码 代码如下:

page.dom.factory = function (type) {
    return new page.dom[type];
}

使用方式如下：
复制代码 代码如下:

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

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

总结

什么时候使用工厂模式

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

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

什么时候不该用工厂模式

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

您可能感兴趣的文章:

相关文章

  • ES6 fetch函数与后台交互实现

    ES6 fetch函数与后台交互实现

    最近在学习react-native，遇到调用后端接口的问题。看了看官方文档，推荐使用es6的fetch来与后端进行交互，这篇文章主要介绍了ES6 fetch函数与后台交互实现，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JS 根据子网掩码，网关计算出所有IP地址范围示例

    JS 根据子网掩码，网关计算出所有IP地址范围示例

    这篇文章主要介绍了JS 根据子网掩码，网关计算出所有IP地址范围,涉及IP地址、子网的正则验证,子网掩码计算等相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • ES6之Proxy的get方法详解

    ES6之Proxy的get方法详解

    这篇文章主要介绍了ES6之Proxy的get方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JS获得一个对象的所有属性和方法实例

    JS获得一个对象的所有属性和方法实例

    下面小编就为大家带来一篇JS获得一个对象的所有属性和方法实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 从零开始用electron手撸一个截屏工具的示例代码

    从零开始用electron手撸一个截屏工具的示例代码

    这篇文章主要介绍了从零开始用electron手撸一个截屏工具的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • JS实现的简洁纵向滑动菜单(滑动门)效果

    JS实现的简洁纵向滑动菜单(滑动门)效果

    这篇文章主要介绍了JS实现的简洁纵向滑动菜单(滑动门)效果,通过简单的页面元素遍历实现华东切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 网站接入QQ登录的两种方法

    网站接入QQ登录的两种方法

    网站接入QQ登录，首先引入授权js文件，这个需要提交申请的，通过之后按照下面的步骤进行操作就可以了
    2014-07-07
  • echarts图例过多显示问题解决方案

    echarts图例过多显示问题解决方案

    开发Echarts图标时经常遇到数据量过多引起的图例错乱,这个时候我们应该如何处理?下面这篇文章主要给大家介绍了关于echarts图例过多显示问题的解决方案,需要的朋友可以参考下
    2023-11-11
  • 微信小程序如何引用外部js，外部样式，公共页面模板

    微信小程序如何引用外部js，外部样式，公共页面模板

    这篇文章主要介绍了微信小程序引用外部js，外部样式，公共页面模板,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • uniapp实现app自动更新详细步骤

    uniapp实现app自动更新详细步骤

    这篇文章主要给大家介绍了关于uniapp实现app自动更新的详细步骤,文中给出了详细的代码示例以及图文教程,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08

最新评论