簡單工廠
假設(shè)你想開一個(gè)自行車店烘浦,里面有幾種不同品牌的自行車恩掷,可以用下面的類表示蚓土。
var BicycleShop = function(){};
BicycleShop.prototype ={
sellBicyle:function(model){
var bicyle ;
switch(model){
case 'The Speedster':
bicyle = new Speedster();
break;
case 'The Lowrider':
bicyle = new Lowrider();
break;
case 'The Comfort Cruiser':
default:
bicyle = new ComfortCruiser();
}
Interface.ensureImplements(bicyle,Bicyle);
bicyle.assemble();
bicyle.wash();
return bicyle;
}
}
var Bicyle = new Interface('Bicyle',['assemble','wash','ride','repair']);
var Speedster = function(){};
Speedster.prototype = {
assemble:function(){},
wash:function () {
},
ride:function () {
},
repair:function () {
}
}
var Lowrider = function(){};
Lowrider.prototype = {
assemble:function(){},
wash:function () {
},
ride:function () {
},
repair:function () {
}
}
var ComfortCruiser = function(){}
ComfortCruiser.prototype = {
assemble:function(){},
wash:function () {
},
ride:function () {
},
repair:function () {
}
}
var californiaCruisers = new BicycleShop();
// 你想買一輛The Speedster 品牌的自行車
var yourNewBike = californiaCruisers.sellBicyle('The Speedster');
console.log(yourNewBike)
關(guān)于 interface 詳見http://www.reibang.com/p/61b4467ea157
這樣看起來似乎很不錯(cuò)肖粮,但是如果你想要新增一種品牌革半,就要修改BicycleShop,更好的辦法是把sellBicyle轉(zhuǎn)交給簡單工廠:
var BicycleFactory = {
createBicycle:function(model){
var bicycle;
switch (model){
case 'The Speedster':
bicycle = new Speedster();
break;
case 'The Lowrider':
bicycle = new Lowrider();
break;
case 'The Comfort Cruiser':
default:
bicycle = new ComfortCruiser();
break;
}
Interface().ensureImplements(bicycle,Bicycle);
return bicycle;
}
}
var BicycleShop = function(){}
BicycleShop.prototype = {
sellBicycle:function(model){
var bicycle = new BicycleFactory(model);
bicycle.assemble();
bicycle.wash();
return bicycle;
}
}
工廠模式
真正的工廠模式與簡單工廠的區(qū)別是,它不是使用另一個(gè)對象或類來創(chuàng)建自行車,而是使用一個(gè)子類洼怔。按照定義署惯,工廠是將其成員對象的實(shí)例化推遲到子類中進(jìn)行的類。
//這里BicycleShop 是一個(gè)抽象類
var BicycleShop = function(){}
BicycleShop.prototype = {
sellBicycle : function(model){
var bicycle = this.createBicycle(model);
return bicycle;
},
createBicycle:function(model){
throw new Error('Unsupported operation on an abstract 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();
break;
}
Interface.ensureImplements(bicycle,Bicycle);
return bicycle;
}
var Bicycle = new Interface('Bicyle',['assemble','wash','ride','repair']);
var AcmeSpeedster = function(){};
AcmeSpeedster.prototype = {
assemble:function(){},
wash:function () {
},
ride:function () {
},
repair:function () {
}
}
var alecsCruisers = new AcmeBicycleShop();
var yourMike = alecsCruisers.sellBicycle('The Speedster');
xhr工廠
Ajax 是現(xiàn)在微博開發(fā)中的一個(gè)常見任務(wù),用于發(fā)起請求的對象是某種類的實(shí)例,具體是哪種類取決于用戶的瀏覽器,如果代碼中有多次ajax請求那么明智的做法是吧創(chuàng)建這種對象的代碼提取到一個(gè)類中
var Ajaxhandler = new Interface('AjaxHandler',['request','createXhrObject']);
var SimpleHandler = function(){}
SimpleHandler.prototype = {
request:function(method,url,callback,postVars){
var xhr = this.createXhrObject();
xhr.onreadystatechange = function(){
if(xhr.readystate !=4){
return;
}
(xhr.status === 200)?
callback.success(xhr.responseText,xhr.responseXML):
callback.failure(xhr.status);
};
xhr.open(method,url,true);
if(method != 'POST') postVars = null;
xhr.send(postVars);
},
createXhrObject:function(){
var methods = [
function(){return new XMLHttpRequest();},
function(){return new ActiveXObject('Msxml2.XMLHTTP')},
function(){return new ActiveXObject('Microsoft.XMLHTTP')},
];
for(var i=0;i<methods.length;i++){
try {
methods[i]();
}
catch(e){
continue;
}
this.createXhrObject = methods[i](); // 之后就不用循環(huán) 檢查瀏覽器支持的 對象了
return methods[i]();
}
throw new Error('can not create xhr');
}
}
var myHandler = new SimpleHandler();
var callback = {
scuucess:function(){},
failure:function(){}
}
myHandler.request('GET','url',callback);