JavaScript 模式之工厂模式(Factory)应用介绍


Posted in Javascript onNovember 15, 2012

工厂模式也是对象创建模式之一,它通常在类或类的静态方法中去实现。构造对象的一种方式是使用new操作符,但使用new时正是针对实现编程,会造成“耦合”问题,与具体的类关系紧密。导致代码更脆弱,缺乏弹性,在复杂逻辑的项目中建议是面向接口编程。
先看简单工厂模式

Person(name, age) { 
var obj = {} 
obj.name = name 
obj.age = age 
return obj 
} 
var p1 = Person('jack', 25) 
var p2 = Person('lily', 22)

与构造函数方式写一个类的区别在于没有使用this,而是每次都构造一个空对象,然后给其添加属性。创建对象方式不是使用new,而是使用函数调用方式。这种方式基本上用来替代一个类(具有相同属性的对象),而复杂一些的工厂则可以造不同类型的对象。
下面以个水果工厂示例
function Banana() { 
this.price = '$1.5' 
} 
function Apple() { 
this.price = '$1.2' 
} 
function Orange() { 
this.price = '$2.2' 
} 
// 静态工厂类 
function Fruit() {} 
Fruit.factory = function(type) { 
if (!window[type]) { 
return 
} 
var fruit = new window[type] 
return fruit 
} 
// 制造不同的水果 
var banana = Fruit.factory('Banana') 
var apple = Fruit.factory('Apple') 
var orange = Fruit.factory('Orange')

有三个水果类Banana、Apple、Orange,一个水果工厂类Fruit,通过静态方法factory每次可以造出不同的水果类对象。
工厂模式在JavaScript原生对象Object也有所体现,比如
var obj = Object(), 
num = Object(1), 
str = Object('s'), 
boo = Object(false);

Object就是一个工厂,根据参数不同会构造出不同的对象。obj是一个空对象,num是一个Number类型的对象,str是一个String类型的对象,boo是Boolean类型的对象。
jQuery.Callbacks也是一个工厂,每次调用它都会返回一个具有add, remove, fire等方法的对象。还可以根据参数如“once”, “memory”等构造出具有不同性质的对象。

所谓的工厂模式,是指可以返回一个对象的方法。
利用这种模式,我们可以做什么呢?假设我不满足现有的DOM对象里面所拥有的方法,我想要增加一个自定义的方法叫sayHello,我们可以这样做:

function RemouldNodeObj(DomNode){ 
//先判断一下传递进来的参数是不是一个Dom节点 
if(typeof DomNode == "object" && DomNode.nodeType == 1){ 
DomNode.say = function(){ 
alert("Hello!!"); 
} 
}else{ 
alert("你传递进来的参数不正确!"); 
} 
} //这样调用: 
window.onload = function(){ 
var oDiv = RemouldNodeObj(document.getElementById("test")); 
//通过这一步,oDiv就拥有了新的方法say 
oDiv.say(); 
}

有了上面的基础后,我们来实现点复杂的功能,我们要实现只要通过js的调用就生成一个简单的form表单,看代码:
<html> 
<head> 
<title>JavaScript之工厂模式</title> 
<script type="text/javascript"> 
function RemouldNodeObj(DOMnode){ 
//先判断一下传递进来的参数是不是一个Dom节点 
if(typeof DOMnode == "object" && DOMnode.nodeType == 1){ 
DOMnode.createForm = function(opt){ 
//下面是一大串的字符串加法,只是为了拼装出form元素 
var oForm = ""; 
oForm += "<form action=\"" + opt.action + "\" "; 
oForm += "method=\"" + (opt.method || 'GET') + "\" id=\""; 
oForm += (opt.id || "") + "\""; 
oForm += "style=\"width:200px;height:30px;border:2px solid #223344\">"; 
oForm += "</form>"; 
//这里的this不要想得太复杂,谁调用就指向谁,所以this指向 oDiv 
this.innerHTML = oForm; 
} 
}else{ 
alert("参数不正确!"); 
} 
return DOMnode; 
} //这样调用 
window.onload = function(){ 
var oDiv = RemouldNodeObj(document.getElementById("custom")); 
oDiv.createForm({ 
'action' : 'index.jsp', 
'method' : 'post', 
'id' : 'myForm' 
}); 
} 
</script> 
</head> 
<body> 
<div id="custom">###</div> 
</body> 
</html>

看到了没?这样的调用方式是不是很像jQuery?如果能够解决跨浏览器问题的话,其实完全可以做出一个搜索栏插件来!
Javascript 相关文章推荐
jQuery中调用WebService方法小结
Mar 28 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JS中字符串trim()使用示例
May 26 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 #Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 #Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 #Javascript
jquery offset函数应用实例
Nov 14 #Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 #Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 #Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 #Javascript
You might like
各种战术和打法的原创者
2020/03/04 星际争霸
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
急诊科护士自我鉴定
2013/10/14 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
学校开除通知书
2015/04/25 职场文书
课题研究阶段性总结
2015/08/13 职场文书
创业计划书之面包店
2019/09/12 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
Golang 结构体数据集合
2022/04/22 Golang