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 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
javascript常用函数(1)
Nov 04 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
Vue编程式跳转的实例代码详解
Jul 10 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单例模式的简单实现方法
2016/06/10 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
vue弹窗组件使用方法
2018/04/28 Javascript
简述JS控制台的使用
2018/07/15 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
python调用windows api锁定计算机示例
2014/04/17 Python
python定时执行指定函数的方法
2015/05/27 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python 面向对象部分知识点小结
2020/03/09 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
浅析Python中字符串的intern机制
2020/10/03 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
个人四风对照检查材料
2014/09/26 职场文书
尊师重教主题班会
2015/08/14 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS