脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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.处理大量具有相同属性的小对象

什么时候不该用工厂模式

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

您可能感兴趣的文章:

相关文章

  • javascript屏蔽右键代码

    javascript屏蔽右键代码

    屏蔽右键在某些特殊的情况下还是比较有用的，下面与大家分享个常用的屏蔽方法
    2014-05-05
  • bootstrap datetimepicker日期插件超详细使用方法介绍

    bootstrap datetimepicker日期插件超详细使用方法介绍

    本篇文章主要介绍了bootstrap datetimepicker日期插件超详细使用方法介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • js控制台报错Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild‘)的解决

    js控制台报错Uncaught TypeError: Cannot read p

    本文主要介绍了js控制台报错Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild‘)的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 如何从对象数组中筛选符合条件的值

    如何从对象数组中筛选符合条件的值

    这篇文章主要介绍了如何从对象数组中筛选符合条件的值，具有很好的参考价值，希望对大家有所帮助。
    2022-09-09
  • JavaScript Distilled 基础知识与函数

    JavaScript Distilled 基础知识与函数

    JavaScript是一种动态的，弱类型的，基于原型的，面向对象的解释型语言。函数是JavaScript中的头等公民。
    2010-04-04
  • 微信小程序wx:for 的使用及wx:key绑定两种方式

    微信小程序wx:for 的使用及wx:key绑定两种方式

    wx:for是微信小程序中的一个列表渲染指令,用于循环渲染一个数组或对象中的数据,它类似于JavaScript中的for循环,可以根据数据的长度自动渲染相应的列表项,本文给大家介绍微信小程序wx:for 的使用及wx:key绑定两种方式,感兴趣的朋友一起看看吧
    2023-12-12
  • js中的布尔运算符使用介绍

    js中的布尔运算符使用介绍

    布尔运算符 && 和 || 的时候，我说过它们的结果是布尔值，它们也能用于计算其他的类型的数据，这种时候，返回的就将是其中的一个参数了
    2013-11-11
  • Antd中Table列表行默认包含修改及删除功能的封装方法

    Antd中Table列表行默认包含修改及删除功能的封装方法

    这篇文章主要介绍了Antd中Table列表行默认包含修改及删除功能的封装,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • 微信小程序使用Vant Weapp组件库的方法步骤

    微信小程序使用Vant Weapp组件库的方法步骤

    这篇文章主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-08-08
  • js实现带缓动动画的导航栏效果

    js实现带缓动动画的导航栏效果

    本篇文章主要分享了js实现带缓动动画的导航栏效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01

最新评论