本文實例講述了javascript設計模式 ? 抽象工廠模式原理與應用。分享給大家供大家參考，具體如下：

介紹：基于工廠模式，繼續升級。來解決工廠模式存在多個工廠類的問題。主要的思想是將一些相關的產品組成一個產品族，由同一個工廠來統一生產。

定義：抽象工廠模式提供一個創建一系列相關或相互依賴的接口，而無須指定他們具體的類。抽象工廠模式又稱kit模式，它是一種對象創建型模式。

場景：還是上面的Dialog類，如果繼續向后發展，會有各種各樣的彈窗，如果新增一個彈窗包含了notice和toast。這樣的情況下，我們不需要再單獨新增一個工廠類。我們需要對這一類具有同樣特征的彈窗進行聚合。

示例：

var Dialog = function(){ this.show = function(){ console.log(this.name + ’ is show -> ’ + this.element); }}; Dialog.createNotice = function(){ var _dialog = new Dialog(); _dialog.element = ’<div>notice</div>’; _dialog.name = ’notice’; return _dialog;}; Dialog.createToast = function(){ var _dialog = new Dialog(); _dialog.element = ’<div>toast</div>’; _dialog.name = ’toast’; return _dialog;}; Dialog.createWarnin = function(){ var _dialog = new Dialog(); _dialog.element = ’<div>warnin</div>’; _dialog.name = ’warnin’; return _dialog;}; var Factory = {}; Factory.ConvergeFactory = function(){ return { getNotice: function(){ return Dialog.createNotice(); }, getToast: function(){ return Dialog.createToast(); }, getWarnin: function(){ return Dialog.createWarnin(); } }} var converge = Factory.ConvergeFactory();var notice = converge.getNotice();var toast = converge.getToast();var warnin = converge.getWarnin();notice.show(); //notice is show -> <div>notice</div>toast.show(); //toast is show -> <div>toast</div>warnin.show(); //warnin is show -> <div> warnin </div>

抽象工廠模式主要解決的是Factory過多的問題，經過組合產生新的產品族。

我們這里的舉例有些牽強，換個場景，如果我們有很多按鈕啊，輸入框之類的組件，要通過單獨的工廠進行獲取實例。

抽象工廠模式就是將特定的組件經過聚合產生新的工廠。

但這樣的結果好還是不好，增加新的產品族時遵守了開關原則，但是在對新的產品族結構進行修改時就會發現需要從業務到工廠到子類挨個修改，也違反了開關原則。

所以抽象工廠模式的使用場景需要特別嚴謹，要在設計之初全面考慮，不要輕易對產品族結構進行修改。

抽象工廠模式總結：

優點：* 當產品族被使用后，隔離了具體類的實現* 新增產品族時很方便，無需修改已有結構，符合開關原則

缺點：* 修改已有產品族結構時，需要修改工廠以及所有使用的業務代碼。

前面我們介紹了三種工廠模式，在前端使用的過程中，要靈活的應用，使用其思想而不是生搬硬套。

工廠模式核心是通過不同參數來生成不同產品。抽象工廠和工廠是在實際場景下進行優化而來。

這也提醒我們，要不斷地對代碼進行思考，進行優化。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。