深入理解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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
jQuery异步提交表单实例
May 30 jQuery
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 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
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python代码能做成软件吗
2020/07/24 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
采购部岗位职责
2013/11/24 职场文书
不假外出检讨书
2014/01/27 职场文书
单身联谊活动方案
2014/01/29 职场文书
个人自我评价范文
2014/02/05 职场文书
授权委托书格式模板
2014/04/03 职场文书
2014年团委工作总结
2014/11/13 职场文书
廉洁自律个人总结
2015/02/14 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python