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 相关文章推荐
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
node跨域请求方法小结
Aug 25 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 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读取csv实现csv文件下载功能
2013/12/18 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
基于Python的关键字监控及告警
2017/07/06 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python游戏地图最短路径求解
2019/01/16 Python
Python中一般处理中文的几种方法
2019/03/06 Python
django数据库自动重连的方法实例
2019/07/21 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python ellipsis 的用法详解
2020/11/20 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
商场消防管理制度
2014/01/12 职场文书
三年级评语大全
2014/04/23 职场文书
入党介绍人考察意见
2015/06/01 职场文书
锦旗赠语
2015/06/23 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书