当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 设计模式学习 Factory

Javascript
[原创]js 日期加红代码 适用于各种cms
[原创]javascript 改变字体大小方法集合
jsTree树控件(基于jQuery, 超强悍)[推荐]
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
jQuery live( type, fn ) 委派事件实现
javascript createElement()创建input不能设置name属性的解决方法
Jquery 表单取值赋值的一些基本操作
jquery select选中的一个小问题
网页里控制图片大小的相关代码
网页常用特效代码整理
网站上面有这种切换效果
tagName的使用,留一笔
图片按比例缩放函数
非常好的js代码
精彩图片推荐 渐隐渐现
左右图片循环滚动停顿一下后继续
popdiv
奇妙的Javascript图片放大镜
怎么用javascript进行拖拽
一个表格收缩展开的函数

Javascript 中的 JavaScript 设计模式学习 Factory


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 441 ::
收藏到网摘: n/a

通过接口实现工厂,这是通过List方式显示RSS 等实现代码。
复制代码 代码如下:

/* 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');