深入理解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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
使用户点击后退按钮使效三行代码
Jul 07 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
JavaScript 函数replace深入了解
2013/03/14 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python 发送邮件方法总结
2020/08/10 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Python通过len函数返回对象长度
2020/10/22 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
合作投资意向书
2014/04/01 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
作风整顿剖析材料
2014/09/30 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
浅析JavaScript中的变量提升
2022/06/01 Javascript