JavaScript design pattern learning Factory_javascript skills

Copy code The code is as follows:

/* DisplayModule interface. */
var DisplayModule = new Interface ('DisplayModule', ['append', 'remove', 'clear']);
/* ListDisplay class. */
//Implement the factory through the interface, which is to display RSS in List mode
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(''
title.firstChild.data '');
}
},
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. */
//Factory manager, here you can select a specific Display based on the parameters passed in
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);
}
};
================================ =====================
Another bicycle factory example:
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. */

Copy code code As follows:

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