JavaScript デザインパターンの学習 Factory_javascript スキル

コードをコピーします コードは次のとおりです:

/* DisplayModule インターフェイス */
var DisplayModule = new Interface ('DisplayModule', ['append', 'remove', 'clear']);
/* ListDisplay クラス */
//RSS を表示するためのファクトリを実装します。リストモードでは
var ListDisplay = function(id,parent) { // 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 = '';
/* 構成オブジェクト。 conf = {
id: 'cnn-top-stories',
feedUrl: 'http://rss.cnn.com/rss/cnn_topstories.rss',
updateInterval: 60, // 秒単位.
parent: $('feed-readers')
};
/* FeedReader クラス */
var FeedReader = function(display, xhrHandler, conf) {
this.display = 表示;
this.xhrHandler = xhrHandler;
this.startUpdates();
};
FeedReader.prototype = {
fetchFeed ) {
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,
); ,
parseFeed: function(responseText, responseXML) {
this.display.clear();
var items = responseXML.getElementsByTagName('item');
for(var i = 0, len) = items.length; var title = items[i].getElementsByTagName('title')[0];
var link = items[i].getElementsByTagName('link' )[0];
this.display.append(''
title.firstChild.data ''); 🎜>}
},
showError: function(statusCode) {
this.display.clear();
this.display.append('フィードの取得中にエラーが発生しました。'); ,
stopUpdates: function() {
clearInterval(this.interval);
},
startUpdates: function() {
this.fetchFeed();
var that = this; ;
this.interval(function() { that.fetchFeed(); },
this.conf.updateInterval * 1000);
/* FeedManager 名前空間. */
//ファクトリー マネージャー。ここでは、
var FeedManager = {
createFeedReader: function(conf) {
var displayModule = new ListDisplay( conf.id '-display' , conf.parent);
Interface.ensureImplements(displayModule, DisplayModule);
var xhrManager.createXhrHandler();
Interface.ensureImplements(xhrHandler, AjaxHandler); 🎜>return new FeedReader(displayModule , xhrHandler, conf);
}
} ================= ======= =====================
別の自転車工場の例:
var BicycleShop = function() {}; >BicycleShop.prototype = {
sellBicycle: function(model) {
var Bicycle = this.createBicycle();
bicycle.wash(); return bike;
},
createBicycle: function(model) {
throw new Error('サポートされていない操作が抽象クラスです。');
}
/* AcmeBicycleShop クラス。 */
var AcmeBicycleShop = function() {};
extend(AcmeBicycleShop, BicycleShop);
var bike; switch(model) {
ケース 'スピードスター':
自転車 = 新しい AcmeSpeedster();
ケース 'ローライダー':
自転車 = 新しい AcmeLowrider(); >break;
case 'The Flatlander':
bicycle = new AcmeFlatlander();
case 'The Comfort Cruiser':
default:
bicycle = new AcmeComfortCruiser( );
}
Interface.ensureImplements(bicycle, Bicycle);
自転車を返す;
/* GeneralProductsBicycleShop = function() {} ;
extend (GeneralProductsBicycleShop, BicycleShop);
GeneralProductsBicycleShop.prototype.createBicycle = function(model) {
var bike;
switch(model) {
case 'The Speedster':
bicycle = new GeneralProductsSpeedster ();
case 'The Lowrider':
bicycle = new GeneralProductsLowrider();
case 'The Flatlander': = new GeneralProductsFlatlander() ;
break;
case 'The Comfort Cruiser':
default:
bicycle = new GeneralProductsComfortCruiser();
Interface.ensureImplements(bicycle, Bicycle) );
自転車を返します。


/* 使用法。



コードをコピーします。 >
コードは次のとおりです:

var alecsCruisers = new AcmeBicycleShop();
var yourNewBike = alecsCruisers.sellBicycle('The Lowrider');
var bobsCruisers = new GeneralProductsBicycleShop();
var yourSecondNewBike = bobsCruisers.sellBicycle('The Lowrider');