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实现图片的前进与后退功能
Apr 24 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
Angular表单验证实例详解
Oct 20 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
从0开始学Vue
2016/10/27 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Python实现弹球小游戏
2020/08/01 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
公司合作协议范文
2014/10/01 职场文书
感谢信怎么写
2015/01/21 职场文书
运动会观后感
2015/06/09 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang