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

Javascript
IE Firefox 使用自定义标签的区别
Javascript 圆角div的实现代码
js 获取网络图片的高度和宽度的实现方法(变通了下)
JavaScript 对象成员的可见性说明
JQuery困惑—包装集 DOM节点
JavaScript 三种创建对象的方法
半角全角相互转换的js函数
显示js对象所有属性和方法的函数
实现JavaScript中继承的三种方式
JavaScript 函数式编程的原理
JavaScript 定义function的三种方式小结
JavaScript 基于原型的对象(创建、调用)
层序遍历在ExtJs的TreePanel中的应用
将jQuery应用于login页面的问题及解决
document.onreadystatechange事件的用法分析
JS 仿Flash动画放大/缩小容器
javascript 定时自动切换的选项卡Tab
图片友情链接滚动 横向,带控制按钮
简单的加密css地址防止别人下载你的CSS文件的方法
图片与JavaScript配合做出个性滚动条

Javascript 中的 JavaScript 设计模式学习 Factory


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 208 ::
收藏到网摘: 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');