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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 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
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php define的第二个参数使用方法
2013/11/04 PHP
YII中assets的使用示例
2014/07/31 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
js Dialog 实践分享
2012/10/22 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
js实现常用排序算法
2016/08/09 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
js实现旋转木马效果
2017/03/17 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
django使用xadmin的全局配置详解
2019/11/15 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
如何利用Python写个坦克大战
2020/11/18 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
吸烟检讨书2000字
2014/02/13 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
社区活动总结报告
2014/05/05 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
小学生环保倡议书
2014/05/15 职场文书
置业顾问岗位职责
2015/02/09 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书