這篇文章給大家分享的是有關javascript設計模式中工廠模式原理的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
介紹：簡單工廠模式是最常用的一類創(chuàng)建型設計模式。其中簡單工廠模式并不屬于GoF23個經典設計模式，它通常被作為學習其他工廠模式的基礎。
定義：定義一個工廠類，它可以根據(jù)參數(shù)的不同返回不同的實例，被創(chuàng)建的實例通常都具有相同的父類，因為在簡單工廠模式中創(chuàng)建實例的方法是靜態(tài)方法，因此簡單工廠模式又被稱為靜態(tài)工廠方法模式，它屬于類創(chuàng)建型模式。
場景：我們需要寫一個dialog工具類，在項目初期我們只需要考慮一個簡單的彈窗實現(xiàn)，項目持續(xù)迭代，會衍生出各種類型的彈窗，帶關閉按鈕的，帶確認按鈕的…..
我見到最多的做法是根據(jù)一個type值來判斷當前需要彈什么類型的窗口，這樣的設計我之前沒覺得有問題，但是看了前面介紹的設計原則，我們也來分析下這么做的缺點：
1. 存在多個if…else…代碼塊，代碼冗長，閱讀困難，維護困難，測試困難，影響系統(tǒng)性能。
2. dialog類職責過重，負責初始化所有彈窗實例，違反了單一職責原則，不利于重用和維護。
3. 當需要新增彈窗類型是，必須修改源代碼，違反了開關原則。
4. 不同種類彈窗基礎樣式相同，會導致存在大量重復代碼。
5. 各類彈窗的創(chuàng)建和使用都是在各個業(yè)務邏輯中，如果我想修改創(chuàng)建方式必須修改所有業(yè)務代碼，違反了開關原則
示例：
重慶分公司
重慶分公司
var Dialog = (function(){
var createNotice = function(){
return 'notice';
}
var createToast = function(){
return 'toast';
}
var createWarnin = function(){
return 'warnin';
}
var Dialog = function(){
this.element = '';
this.name = '';
this.show = function(){
console.log(this.name + ' is show -> ' + this.element);
};
}
return {
factory: function(arg){
var _dialog;
if(arg === 'notice'){
_dialog = new Dialog();
_dialog.element = createNotice();
_dialog.name = 'notice';
}else if(arg === 'toast'){
_dialog = new Dialog();
_dialog.element = createToast();
_dialog.name = 'toast';
}else if(arg === 'warnin'){
_dialog = new Dialog();
_dialog.element = createWarnin();
_dialog.name = 'warnin';
}
return _dialog;
}
}
})();
var notice = Dialog.factory('notice');
var toast = Dialog.factory('toast');
var warnin = Dialog.factory('warnin');
toast.show(); //toast is show -> toast
notice.show(); //notice is show -> notice
warnin.show(); //warnin is show -> warnin以上的解決方案是自己理解著寫的，對照著java的示例寫了一個，實現(xiàn)的方式有很多種，你可以用原型鏈，用繼承來實現(xiàn)都可以。我們這里主要討論下為什么要這么寫。
之前我們列出了5個缺點：我們主要解決了2，4和5,將共有的方法屬性抽取出來寫在父類上，減少了重復代碼，將每種情況特有的代碼抽取出來，解決了不符合單一職責原則的問題。
重要的是將所有彈窗的創(chuàng)建集中在工廠類中，當有修改時，只需要修改工廠類即可，不會影響業(yè)務代碼。
這里我們思考一下：1.如何去掉那些if…else…？ 2.當我要新增一個error類型的彈窗時如何滿足開關原則？
我自己試了一下：
var Dialog = function(){
this.element = '';
this.name = '';
this.show = function(){
console.log(this.name + ' is show -> ' + this.element);
};
}
Dialog.createNotice = function(){ return 'notice'; };
Dialog.createToast = function(){ return 'toast'; };
Dialog.createWarnin = function(){ return 'warnin'; };
Dialog.factory = function(arg){
var _dialog = new Dialog();
_dialog.element = Dialog[arg]();
_dialog.name = arg;
return _dialog;
};
var notice = Dialog.factory('createNotice');
var toast = Dialog.factory('createToast');
var warnin = Dialog.factory('createWarnin');
notice.show(); //createNotice is show -> notice
warnin.show(); //createWarnin is show -> warnin
toast.show(); //createToast is show -> toast這樣當我做新增時，只需要要新增一條配置即可，不用去對公告內容做修改。滿足了開關原則的對擴展支持對修改關閉。
簡單工廠模式總結：
優(yōu)點：
* 簡單工廠模式實現(xiàn)了對象創(chuàng)建和使用的分離
缺點：
* 工廠模式集中了所有產品的創(chuàng)建邏輯，職責過重，一旦出現(xiàn)問題會影響到整個系統(tǒng)
適用場景：
* 適用于創(chuàng)建的對象比較少，由于創(chuàng)建的對象較少，不會造成工廠方法中的業(yè)務邏輯太過復雜
* 客戶端只知道傳入工廠類的參數(shù)，對于如何創(chuàng)建對象并不關心
感謝各位的閱讀！關于“javascript設計模式中工廠模式原理的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
