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 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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中使用PDF文档功能
2006/10/09 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
yii分页组件用法实例分析
2015/12/28 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
Js基础学习资料
2010/11/23 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
使用Python实现简单的服务器功能
2017/08/25 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
什么是事务?为什么需要事务?
2012/01/09 面试题
消防应急演练方案
2014/02/12 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
毕业生求职信
2014/06/10 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
革命电影观后感
2015/06/18 职场文书
结婚纪念日感言
2015/08/01 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书