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 相关文章推荐
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
使用javascript插入样式
Mar 14 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
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抓取页面的几种方法详解
2013/06/17 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
python 实现插入排序算法
2012/06/05 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python用for循环求和的方法总结
2019/07/08 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Python如何实现强制数据类型转换
2019/11/22 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
财务工作个人求职的自我评价
2013/12/19 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
python基础之停用词过滤详解
2021/04/21 Python