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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
实现无刷新联动例子汇总
May 20 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
VuePress 静态网站生成方法步骤
Feb 14 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
js加减乘除精确运算方法实例代码
Jan 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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php实现的双向队列类实例
2014/09/24 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
js回调函数仿360开机
2019/12/26 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
省级优秀毕业生主要事迹
2014/05/29 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android