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下利用jsonp跨域访问实现方法
Jul 29 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
原生js轮播特效
May 18 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python实现感知器
2017/12/19 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Flask之flask-session的具体使用
2018/07/26 Python
python创建文件备份的脚本
2018/09/11 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
酒店副总岗位职责
2013/12/24 职场文书
社会保险接收函
2014/01/12 职场文书
网络教育自我鉴定
2014/02/04 职场文书
抽样调查项目计划书
2014/04/24 职场文书
大学生励志演讲稿
2014/04/25 职场文书
岗位职责说明书模板
2014/07/30 职场文书
工作证明格式及范本
2014/09/12 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
运动员入场前导词
2015/07/20 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python