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 冒号 使用说明
Jun 06 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
vue内置指令详解
Apr 03 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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 根据IP地址控制访问的代码
2010/04/22 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
JavaScript面象对象设计
2008/04/28 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
让python json encode datetime类型
2010/12/28 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python读取Excel表格文件的方法
2019/09/02 Python
python重要函数eval多种用法解析
2020/01/14 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
大学新生军训方案
2014/05/03 职场文书
2014年招生工作总结
2014/11/26 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis