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

介紹：前面我們介紹了簡單工廠模式，簡單工廠模式存在一個嚴重的問題：當需要擴充套件時必定要修改工廠類的原始碼。我們雖然在第二個demo中做了一些優化，但是我們需在使用時明確指定執行方法的名字，這無疑提高了使用成本。那如何實現增加新產品而不影響已有程式碼？工廠模式應運而生。

定義：定義一個用於建立物件的介面，讓子類決定將哪一個類例項化。工廠模式讓一個類的例項化延遲到其子類。工廠模式又稱為工廠方法模式，又可稱為虛擬構造器模式或多型工廠模式。工廠模式是一種類建立型模式。

場景：還是基於簡單工廠模式的場景，我們試著用工廠模式解決彈窗類的問題。

示例：

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.NoticeFactory = function(){
  return Dialog.createNotice();
}
 
Factory.ToastFactory = function(){
  return Dialog.createToast();
}
 
Factory.WarninFactory = function(){
  return Dialog.createWarnin();
}
 
var notice = Factory.NoticeFactory();
var toast = Factory.ToastFactory();
var warnin = Factory.WarninFactory();
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方法進行拆分

交由其子類也就是createToast方法實現

而將所有工廠入口拆成獨立工廠類，之前的簡單工廠模式在新增時需要修改工廠類，違反了開關原則

工廠模式保證新增時只做新增不做修改

專案足夠大時，你可以將Factory和Dialog的子類拆成檔案進行管理

在寫工廠模式的這段時間，查了一些資料，發現每個人都有自己的理解

看到的一些工廠模式的demo更像是我們前面介紹簡單工廠模式，為什麼呢？

我們的demo參考的是java的書籍，這裡麵包含了抽象類這個概念，在前端只能靠自己的理解去描述

所以我們盡力通過一些差別來具體的介紹每一種模式

這裡面的例子可能不是特別嚴謹，我後面會慢慢優化，寫的詳細一些只有一個目的

當有一天有人問我簡單工廠模式和工廠模式的區別在哪，我希望我能給出一個我的理解

工廠模式總結：

優點：
* 增加新產品時，無需修改已存在的程式碼
* 只暴露工廠類，對具體實現封裝在內部，使用時無需關注內部使用

缺點：
* 新增時還是需要新增具體實現以及提供具體的工廠類，一定程度增加了系統複雜度，會帶來一些額外開銷
* 每個工廠只生產一種產品，會導致存在大量的工廠類，大大增加了系統的維護成本和執行開銷

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

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

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