我的學習筆記是根據我的學習情況來定期更新的,預計2 3天更新一章,主要是給大家分享一下,我所學到的知識,如果有什麼錯誤請在評論中指點出來,我一定虛心接受,那麼廢話不多說開始我們今天的學習分享吧! 前幾次已經和大家分享過了,如何實現javascript的封裝繼承和多態,這次我們開始正式介紹javasc ...
我的學習筆記是根據我的學習情況來定期更新的,預計2-3天更新一章,主要是給大家分享一下,我所學到的知識,如果有什麼錯誤請在評論中指點出來,我一定虛心接受,那麼廢話不多說開始我們今天的學習分享吧!
前幾次已經和大家分享過了,如何實現javascript的封裝繼承和多態,這次我們開始正式介紹javascript設計模式。
這次我們要介紹的是創建型設計模式,創建型設計模式是一類處理對象創建的設計模式,通過某種方式控制對象的創建來避免基本對象創建時可能導致設計上的問題或增加設計上的複雜度。
在創建型設計模式中,主要為大家分享的有簡單工廠模式,工廠方法模式,抽象工廠模式,建造者模式,原型模式,單例模式。本次主要和大家分享,簡單工廠模式。
簡單工廠模式
簡單工廠模式(Simple Factory): 又叫靜態工廠方法,由一個工廠對象決定創建某一種產品對象的實例。主要用來創建同一類對象。
這樣說有可能概念很模糊,下麵我用示例給大家演示
如果我們要寫一組js方法分別要根據不同情況彈出alert(提示框),Confirm(確認框),Prompt(可輸入提示框),我們會怎麼做?
就談談我吧,要換做以前我會直接調用這3個方法,哪裡使用哪裡直接調用
function TestAlert(){
alert("這是一個提示框!");
}
function TestConfirm(){
confirm("這是一個確認框!")
}
function TestPrompt(){
prompt("今天天氣怎麼樣!","");
}
但是,如果需求更改,我要彈出別的提示,我有可能會再寫3個方法
function TestAgainAlert(){
alert("這又是一個提示框!");
}
function TestAgainConfirm(){
confirm("這又是一個確認框!")
}
function TestAgainPrompt(){
prompt("明天天氣怎麼樣!","");
}
以前或許覺得沒什麼就複製粘貼改改就行,但是如果寫的多了,有可能方法在哪自己都忘了還要一個個去找,但是有了封裝的概念之後,我可能會這麼改,我可以把這三個提示框看成3個類,分別是提示類,確認類,可輸入提示類
var AlertClass=function(text){
this.content=text;
}
AlertClass.prototype.show=function(){
alert(this.content);
};
我們來看看調用
var TestAlert=new AlertClass("這是一個提示框!");
TestAlert.show();
其他的類同理
//確認類
var ConfirmClass=function(text){
this.content=text;
}
ConfirmClass.prototype.show=function(){
confirm(this.content);
};
var TestConfirm=new ConfirmClass("這是一個確認框!");
TestConfirm.show();
//可輸入提示類
var PromptClass=function(text){
this.content=text;
}
PromptClass.prototype.show=function(){
prompt(this.content);
};
var TestPrompt=new PromptClass("今天天氣怎麼樣!");
TestPrompt.show();
這樣,我們封裝成類了之後可以便於管理,但是還是很麻煩因為不同的情況我們需要,實例化不同的對象,這個時候我們可以通過簡單工廠模式,去解決這個問題。
我們先定義一個工廠
var EjectFactory=function(name,text){
switch(name){
case 'alert':
return new AlertClass(text);
case 'confirm':
return new confirm(text);
case 'prompt':
return new PromptClass(text);
}
}
這樣我們就創建了一個工廠,我們試著調用一下。
var TestAgainAlert=EjectFactory('alert','這是一個簡單工廠模式創建的提示框!');
TestAgainAlert.show();
是不是看上去很簡單,這樣我們就可以通過一個工廠去決定我們要去實例化哪個類的實例,簡單工廠模式的理念就是創建對象,像我剛纔演示就是對不同的類實例化,當然除此之外簡單工廠模式還可以用來創建相似的對象。
我們同樣用上面的例子,我們可以看到上面的例子同樣的都有content屬性和show方法,那麼我們可以把他們提出來。
var CreateEjectFactory=function(type,text){
//我們先創建一個對象,並對對象拓展屬性和方法
var o=new Object();
o.content=text;
o.show=function(){
if(type=="alert") alert(text);
if(type=="confirm") confirm(text);
if(type=="prompt") prompt(text);
}
return o;
}
我們來調用一下
var TestAgainAlert=CreateEjectFactory('alert','這還是一個簡單工廠模式創建的提示框!');
TestAgainAlert.show();
我們上述兩種簡單工廠模式的創建方法,第一種是通過實例化對象創建的,第二種是通過創建一個新對象然後包裝其屬性和功能來實現的,我們具體的選擇還是要根據我們的實際需求來決定。
也謝謝大家看到這裡:)如果你覺得我的分享還可以請點擊推薦,分享給你的朋友讓我們一起進步~
好了以上就是本次分享的全部內容,本次示例參考自JavaScript設計模式一書,讓我們一點點積累一點點成長,希望對大家有所幫助。