javascript设计模式之工厂模式示例讲解


Posted in Javascript onMarch 04, 2014

javaScript工厂方式原始的方式

因为对象的属性可以在对象创建后动态定义,这在 JavaScript 最初引入时都会编写类似下面的代码

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

在上面的代码中,创建对象 car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象 car。不过这里有一个问题,就是可能需要创建多个 car 的实例,这显然不是很好的方式。

解决方案:工厂方法
要解决该问题,开发者创造了能创建并返回特定类型的对象的工厂函数。例如,函数 createCar() 可用于封装前面列出的创建 car 对象的操作:

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();        //输出 "red"
oCar2.showColor();        //输出 "blue"

调用此工厂函数,将创建新对象,并赋予它所有必要的属性,给 createCar() 函数加上参数,即可为要创建的 car 对象的 color、doors 和 mpg 属性赋值。这使两个对象具有相同的属性,却有不同的属性值。该方法有个不好的地方在于每创建一个car对象(即调用一次createCar函数)都会重复的为每个对象创建showColor 方法,而这时没有必要的而事实上,每个对象都共享同一个函数。于是我们尝试在函数之外去声明其方法属性。

在工厂函数外定义对象的方法
有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:

function showColor() {
  alert(this.color);
}
function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();        //输出 "red"
oCar2.showColor();        //输出 "blue"

在上面这段重写的代码中,在函数 createCar() 之前定义了函数 showColor()。在 createCar() 内部,赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。

Javascript 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
vue数据双向绑定原理解析(get & set)
Mar 08 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 #Javascript
JavaScript的21条基本知识点
Mar 04 #Javascript
js的2种继承方式详解
Mar 04 #Javascript
Seajs的学习笔记
Mar 04 #Javascript
文本域中换行符的替换示例
Mar 04 #Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 #Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JavaScript实现旋转轮播图
2020/08/18 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
详解Python的Lambda函数与排序
2016/10/25 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
检讨书大全
2015/01/27 职场文书
投标单位介绍信
2015/05/05 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA