當前位置:才華齋>設計>網頁設計>

javascript模式設計之工廠模式學習心得

網頁設計 閱讀(1.03W)

模式型別:工廠模式

javascript模式設計之工廠模式學習心得

模式說明:常用模式之一,用來動態建立物件

適用範圍:在執行期間需要在一系列可互換的子類中進行選擇的類

注意事項:介面的實現,從而使不同子類可以被同等的'對待,恰當的使用工廠模式,但不要拘泥與形式,理解本質。

關鍵點:以 函式/類/子類 構建的選擇器

本質:函式作為選擇器的使用

一般使用形式:

作為獨立的選擇器存在:

複製程式碼 程式碼如下:

function FactoryMode(index){

switch(index){

case "index1" :

return new Class1();break;

case "index2":

return new Class2();break;

case "index3":

return new Class3();break;

default:return new ClassComm();break;

}

}

或作為類的一個方法存在:

複製程式碼 程式碼如下:

var MainClass=function(){};//主類構造器

otype={

FactoryMode:function(){}//子類選擇器

}

又或隱式選擇,即不以使用者的主觀選擇而選擇:

複製程式碼 程式碼如下:

var xmlRequest=function(){

if(fOnline()){

xhr= new OfflineHandler();

}//如果此時網路不可用,建立可快取AJAX物件

else if(ghtLatency()){

xhr= new QueuedHandler();

}//如果網路延遲較大,建立佇列形式AJAX物件

else {

xhr=new SimpleHandler();

}//如果網路正常,建立簡單AJAX物件

reImplements(xhr,AjaxHandler);

//檢查物件是否實現了介面,從而確保以後的工作可以順利進行

return xhr;

}

延伸:

工廠模式的本質就是選擇器的應用,選擇器不僅可作為物件的選擇,還可作為函式的選擇,類的選擇,引數的選擇

函式的選擇,如:

複製程式碼 程式碼如下:

var addEvent=(function(){

if(!-[0,]){

return function(elem,type,handler){

elem[type+ring()]=handler;

chEvent("on"+type,elem[type+ring]);

}}//if IE

else {

return function(elem,type,handler){

ventListener(type,handler,false);

}

}

})();//避免多次判斷

類的選擇:

複製程式碼 程式碼如下:

var suitableClass=function(){

if(match condition A) return Class1;

else if(match condition B) return Class2;

else return ClassComm;

}

引數的選擇:

複製程式碼 程式碼如下:

function Country(country){

if(country=="China")

ig={};//設定基本引數1

else if(contry=="America")

ig={};//設定引數2

else if()

.......//等等

}

otype={};