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

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

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

場(chǎng)景：還是上面的Dialog類(lèi)，如果繼續(xù)向后發(fā)展，會(huì)有各種各樣的彈窗，如果新增一個(gè)彈窗包含了notice和toast。這樣的情況下，我們不需要再單獨(dú)新增一個(gè)工廠類(lèi)。我們需要對(duì)這一類(lèi)具有同樣特征的彈窗進(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過(guò)多的問(wèn)題，經(jīng)過(guò)組合產(chǎn)生新的產(chǎn)品族。

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

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

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

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

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

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

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

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

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

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。