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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php探针不显示内存解决方法
2019/09/17 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
为数据添加append,remove功能
2006/10/03 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Angular之toDoList的实现代码示例
2017/12/02 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
在CMD命令行中运行python脚本的方法
2018/05/12 Python
使用numba对Python运算加速的方法
2018/10/15 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python搜索算法原理及实例讲解
2020/11/18 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
车间安全生产标语
2014/06/06 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
单位委托函范文
2015/01/29 职场文书
本溪关门山导游词
2015/02/09 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS