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


Posted in Javascript onMarch 03, 2015

介绍

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

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

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

正文

下面这个例子中,是应用了工厂方法对第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的一些看法
May 27 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
vue项目中实现的微信分享功能示例
Jan 21 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
JS运动基础框架实例分析
Mar 03 #Javascript
jQuery DOM插入节点操作指南
Mar 03 #Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 #Javascript
jQuery DOM删除节点操作指南
Mar 03 #Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 #Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 #Javascript
javascript验证身份证号
Mar 03 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP中“=>
2019/03/01 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python命令行click参数用法解析
2019/12/19 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
flask开启多线程的具体方法
2020/08/02 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
幼儿园中班教学反思
2014/02/10 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
绿色环保演讲稿
2014/05/10 职场文书
购房意向书
2014/08/30 职场文书
仰望星空观后感
2015/06/10 职场文书
教师培训简讯
2015/07/20 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2016公司新年问候语
2015/11/11 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android