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 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
JS前端笔试题分析
Dec 19 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
原生JS实现微信通讯录
Jun 18 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JS实现div居中示例
2014/04/17 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
三个Unix的命令面试题
2015/04/12 面试题
大学生新学期计划书
2014/04/28 职场文书
学校献爱心活动总结
2014/07/08 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL