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 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
js 幻灯片的实现
Dec 06 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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文本转图片自动换行的方法
2013/03/13 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
会计助理的岗位职责
2013/11/29 职场文书
先进个人获奖感言
2014/01/24 职场文书
房产委托公证书样本
2014/04/04 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers