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对象的比较
Feb 26 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php中session退出登陆问题
2014/02/27 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
js中的面向对象入门
2017/03/06 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
parser.add_argument中的action使用
2020/04/20 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
学期自我评价
2014/01/27 职场文书
个人贷款承诺书
2014/03/28 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书