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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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基础知识:类与对象(5) static
2006/12/13 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php读取本地json文件的实例
2018/03/07 PHP
非常好的js代码
2006/06/27 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python实现图像全景拼接
2020/03/27 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
晚归检讨书
2014/02/19 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle