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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
详解Vue数据驱动原理
Nov 17 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
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
谈谈python中GUI的选择
2018/03/01 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
Pycharm修改python路径过程图解
2020/05/22 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
如何做好总经理助理
2013/11/12 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
手工社团活动方案
2014/02/17 职场文书
介绍长城的导游词
2015/01/30 职场文书
会计简历自我评价
2015/03/10 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python