深入理解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 相关文章推荐
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Mac下安装vue
2018/04/11 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
北承题目(C++)
2012/05/16 面试题
.NET常见笔试题集
2012/12/01 面试题
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
学期评语大全
2014/04/30 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
参加招聘会后的感想
2015/08/10 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书