javascript設(shè)計模式 – 抽象工廠模式原理與應(yīng)用實例分析

更新時間：2020年04月09日 09:29:17 作者：李小強(qiáng)

這篇文章主要介紹了javascript設(shè)計模式 – 抽象工廠模式,結(jié)合實例形式分析了javascript抽象工廠模式相關(guān)概念、原理、定義、應(yīng)用場景及操作注意事項,需要的朋友可以參考下

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

介紹：基于工廠模式，繼續(xù)升級。來解決工廠模式存在多個工廠類的問題。主要的思想是將一些相關(guān)的產(chǎn)品組成一個產(chǎn)品族，由同一個工廠來統(tǒng)一生產(chǎn)。

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

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

示例：

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過多的問題，經(jīng)過組合產(chǎn)生新的產(chǎn)品族。

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

抽象工廠模式就是將特定的組件經(jīng)過聚合產(chǎn)生新的工廠。

但這樣的結(jié)果好還是不好，增加新的產(chǎn)品族時遵守了開關(guān)原則，但是在對新的產(chǎn)品族結(jié)構(gòu)進(jìn)行修改時就會發(fā)現(xiàn)需要從業(yè)務(wù)到工廠到子類挨個修改，也違反了開關(guān)原則。

所以抽象工廠模式的使用場景需要特別嚴(yán)謹(jǐn)，要在設(shè)計之初全面考慮，不要輕易對產(chǎn)品族結(jié)構(gòu)進(jìn)行修改。

抽象工廠模式總結(jié)：

優(yōu)點(diǎn)：
* 當(dāng)產(chǎn)品族被使用后，隔離了具體類的實現(xiàn)
* 新增產(chǎn)品族時很方便，無需修改已有結(jié)構(gòu)，符合開關(guān)原則

缺點(diǎn)：
* 修改已有產(chǎn)品族結(jié)構(gòu)時，需要修改工廠以及所有使用的業(yè)務(wù)代碼。

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

工廠模式核心是通過不同參數(shù)來生成不同產(chǎn)品。抽象工廠和工廠是在實際場景下進(jìn)行優(yōu)化而來。

這也提醒我們，要不斷地對代碼進(jìn)行思考，進(jìn)行優(yōu)化。

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