JavaScript 设计模式学习 Factory


Posted in Javascript onJuly 29, 2009
/* DisplayModule interface. */ 
var DisplayModule = new Interface('DisplayModule', ['append', 'remove', 'clear']); 
/* ListDisplay class. */ 
//通过接口实现工厂,这是通过List方式显示RSS 
var ListDisplay = function(id, parent) { // implements DisplayModule 
this.list = document.createElement('ul'); 
this.list.id = id; 
parent.appendChild(this.list); 
}; 
ListDisplay.prototype = { 
append: function(text) { 
var newEl = document.createElement('li'); 
this.list.appendChild(newEl); 
newEl.innerHTML = text; 
return newEl; 
}, 
remove: function(el) { 
this.list.removeChild(el); 
}, 
clear: function() { 
this.list.innerHTML = ''; 
} 
}; 
/* Configuration object. */ 
var conf = { 
id: 'cnn-top-stories', 
feedUrl: 'http://rss.cnn.com/rss/cnn_topstories.rss', 
updateInterval: 60, // In seconds. 
parent: $('feed-readers') 
}; 
/* FeedReader class. */ 
var FeedReader = function(display, xhrHandler, conf) { 
this.display = display; 
this.xhrHandler = xhrHandler; 
this.conf = conf; 
this.startUpdates(); 
}; 
FeedReader.prototype = { 
fetchFeed: function() { 
var that = this; 
var callback = { 
success: function(text, xml) { that.parseFeed(text, xml); }, 
failure: function(status) { that.showError(status); } 
}; 
this.xhrHandler.request('GET', 'feedProxy.php?feed=' + this.conf.feedUrl, 
callback); 
}, 
parseFeed: function(responseText, responseXML) { 
this.display.clear(); 
var items = responseXML.getElementsByTagName('item'); 
for(var i = 0, len = items.length; i < len; i++) { 
var title = items[i].getElementsByTagName('title')[0]; 
var link = items[i].getElementsByTagName('link')[0]; 
this.display.append('<a href="' + link.firstChild.data + '">' + 
title.firstChild.data + '</a>'); 
} 
}, 
showError: function(statusCode) { 
this.display.clear(); 
this.display.append('Error fetching feed.'); 
}, 
stopUpdates: function() { 
clearInterval(this.interval); 
}, 
startUpdates: function() { 
this.fetchFeed(); 
var that = this; 
this.interval = setInterval(function() { that.fetchFeed(); }, 
this.conf.updateInterval * 1000); 
} 
}; 
/* FeedManager namespace. */ 
//工厂管理器,这里可以根据传进来的参数选择具体的Display 
var FeedManager = { 
createFeedReader: function(conf) { 
var displayModule = new ListDisplay(conf.id + '-display', conf.parent); 
Interface.ensureImplements(displayModule, DisplayModule); 
var xhrHandler = XhrManager.createXhrHandler(); 
Interface.ensureImplements(xhrHandler, AjaxHandler); 
return new FeedReader(displayModule, xhrHandler, conf); 
} 
}; 
===================================================== 
另一个自行车工厂的例子: 
var BicycleShop = function() {}; 
BicycleShop.prototype = { 
sellBicycle: function(model) { 
var bicycle = this.createBicycle(model); 
bicycle.assemble(); 
bicycle.wash(); 
return bicycle; 
}, 
createBicycle: function(model) { 
throw new Error('Unsupported operation on an abstract class.'); 
} 
}; 
/* AcmeBicycleShop class. */ 
var AcmeBicycleShop = function() {}; 
extend(AcmeBicycleShop, BicycleShop); 
AcmeBicycleShop.prototype.createBicycle = function(model) { 
var bicycle; 
switch(model) { 
case 'The Speedster': 
bicycle = new AcmeSpeedster(); 
break; 
case 'The Lowrider': 
bicycle = new AcmeLowrider(); 
break; 
case 'The Flatlander': 
bicycle = new AcmeFlatlander(); 
break; 
case 'The Comfort Cruiser': 
default: 
bicycle = new AcmeComfortCruiser(); 
} 
Interface.ensureImplements(bicycle, Bicycle); 
return bicycle; 
}; 
/* GeneralProductsBicycleShop class. */ 
var GeneralProductsBicycleShop = function() {}; 
extend(GeneralProductsBicycleShop, BicycleShop); 
GeneralProductsBicycleShop.prototype.createBicycle = function(model) { 
var bicycle; 
switch(model) { 
case 'The Speedster': 
bicycle = new GeneralProductsSpeedster(); 
break; 
case 'The Lowrider': 
bicycle = new GeneralProductsLowrider(); 
break; 
case 'The Flatlander': 
bicycle = new GeneralProductsFlatlander(); 
break; 
case 'The Comfort Cruiser': 
default: 
bicycle = new GeneralProductsComfortCruiser(); 
} 
Interface.ensureImplements(bicycle, Bicycle); 
return bicycle; 
};

/* Usage. */
var alecsCruisers = new AcmeBicycleShop(); 
var yourNewBike = alecsCruisers.sellBicycle('The Lowrider'); 
var bobsCruisers = new GeneralProductsBicycleShop(); 
var yourSecondNewBike = bobsCruisers.sellBicycle('The Lowrider');

Javascript 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
JQuery UI皮肤定制
Jul 27 #Javascript
JavaScript 设计模式学习 Singleton
Jul 27 #Javascript
xml 封装与解析(javascript和C#中)
Jul 26 #Javascript
JavaScript 捕获窗口关闭事件
Jul 26 #Javascript
jquery tools之tooltip
Jul 25 #Javascript
jquery tools之tabs 选项卡/页签
Jul 25 #Javascript
jquery JSON的解析方式
Jul 25 #Javascript
You might like
example1.php
2006/10/09 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python 互换字典的键值对实例
2019/02/12 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
final, finally, finalize的区别
2012/03/01 面试题
采购部经理岗位职责
2014/02/10 职场文书
银行服务感言
2014/03/01 职场文书
公益广告语集锦
2014/03/13 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
公司员工培训管理制度
2015/08/04 职场文书
python编写五子棋游戏
2021/05/25 Python
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android