JavaScript 設(shè)計(jì)模式學(xué)習(xí) Factory
更新時間:2009年07月29日 01:42:31 作者:
通過接口實(shí)現(xiàn)工廠,這是通過List方式顯示RSS 等實(shí)現(xiàn)代碼。
復(fù)制代碼 代碼如下:
/* DisplayModule interface. */
var DisplayModule = new Interface('DisplayModule', ['append', 'remove', 'clear']);
/* ListDisplay class. */
//通過接口實(shí)現(xiàn)工廠,這是通過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. */
//工廠管理器,這里可以根據(jù)傳進(jìn)來的參數(shù)選擇具體的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. */
復(fù)制代碼 代碼如下:
var alecsCruisers = new AcmeBicycleShop();
var yourNewBike = alecsCruisers.sellBicycle('The Lowrider');
var bobsCruisers = new GeneralProductsBicycleShop();
var yourSecondNewBike = bobsCruisers.sellBicycle('The Lowrider');
您可能感興趣的文章:
- JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式
- JavaScript 設(shè)計(jì)模式 安全沙箱模式
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
- JavaScript 設(shè)計(jì)模式之組合模式解析
- javascript設(shè)計(jì)模式之解釋器模式詳解
- JavaScript設(shè)計(jì)模式之原型模式(Object.create與prototype)介紹
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(鏈?zhǔn)秸{(diào)用)
- JavaScript設(shè)計(jì)模式之單例模式實(shí)例
- JavaScript 設(shè)計(jì)模式學(xué)習(xí) Singleton
- 常用的javascript設(shè)計(jì)模式
- JavaScript編程設(shè)計(jì)模式之構(gòu)造器模式實(shí)例分析
相關(guān)文章
js實(shí)現(xiàn)滑動到頁面底部自動加載更多功能
本文主要分享了js實(shí)現(xiàn)滑動到頁面底部自動加載更多功能的代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02js實(shí)現(xiàn)文本框?qū)挾茸赃m應(yīng)文本寬度的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框?qū)挾茸赃m應(yīng)文本寬度的方法,可實(shí)現(xiàn)根據(jù)文本框內(nèi)容動態(tài)改變寬度的功能,涉及javascript動態(tài)操作頁面元素屬性的技巧,需要的朋友可以參考下2015-08-08Bootstrap每天必學(xué)之級聯(lián)下拉菜單
Bootstrap每天必學(xué)之級聯(lián)下拉菜單,主要應(yīng)用場合有省市級關(guān)聯(lián)菜單等,感興趣的小伙伴們可以參考一下2016-03-03用js實(shí)現(xiàn)簡單的tab選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)簡單的tab選項(xiàng)卡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09js 點(diǎn)擊頁面其他地方關(guān)閉彈出層(示例代碼)
本篇文章主要介紹了js點(diǎn)擊頁面其他地方關(guān)閉彈出層的示例代碼。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12用JavaScript和注冊表腳本實(shí)現(xiàn)右鍵收藏Web頁選中文本
用JavaScript和注冊表腳本實(shí)現(xiàn)右鍵收藏Web頁選中文本...2007-01-01關(guān)于js new Date() 出現(xiàn)NaN 的分析
在一個項(xiàng)目中需要進(jìn)行日期的格式化,后臺傳到前端是時間的整數(shù)(Date.getTime),當(dāng)后臺數(shù)據(jù)返回字符串時,發(fā)現(xiàn)轉(zhuǎn)換日期時在ie下變成NaN,但是真的是這樣嗎?接下來我們慢慢分析2012-10-10