深入理解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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
JS常见算法详解
Feb 28 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
Javascript地址引用代码实例解析
Feb 25 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保存二进制原始数据为图片的程序代码
2014/10/14 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
工作个人的自我评价
2014/01/14 职场文书
财务部经理岗位职责
2014/02/03 职场文书
优秀员工推荐信
2014/05/10 职场文书
政协调研汇报材料
2014/08/15 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript