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 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
angular简介和其特点介绍
Jan 29 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Node.js学习入门
Jan 03 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 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
PHP调试函数和日志记录函数分享
2015/01/31 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
详解Python的Django框架中的通用视图
2015/05/04 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python字符串的拼接方法总结
2019/11/18 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
django项目中新增app的2种实现方法
2020/04/01 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
大学校运会广播稿
2014/02/03 职场文书
教师网络培训感言
2014/03/09 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
冰峪沟导游词
2015/02/09 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
中学生运动会广播稿
2015/08/19 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
Python中npy和mat文件的保存与读取
2022/04/24 Python