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 相关文章推荐
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
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
WHOIS类的修改版
2006/10/09 PHP
php adodb分页实现代码
2009/03/19 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python3 模拟登录v2ex实例讲解
2017/07/13 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python 内置模块详解
2019/01/01 Python
pymysql 开启调试模式的实现
2019/09/24 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python eventlet绿化和patch原理
2020/11/21 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
大学生求职信范文
2014/05/24 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
院系推荐意见
2015/06/05 职场文书