您好,登錄后才能下訂單哦!
這篇文章主要講解了如何使用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過多的問題,經過組合產生新的產品族。
我們這里的舉例有些牽強,換個場景,如果我們有很多按鈕啊,輸入框之類的組件,要通過單獨的工廠進行獲取實例。
抽象工廠模式就是將特定的組件經過聚合產生新的工廠。
但這樣的結果好還是不好,增加新的產品族時遵守了開關原則,但是在對新的產品族結構進行修改時就會發現需要從業務到工廠到子類挨個修改,也違反了開關原則。
所以抽象工廠模式的使用場景需要特別嚴謹,要在設計之初全面考慮,不要輕易對產品族結構進行修改。
抽象工廠模式總結:
優點:
* 當產品族被使用后,隔離了具體類的實現
* 新增產品族時很方便,無需修改已有結構,符合開關原則
缺點:
* 修改已有產品族結構時,需要修改工廠以及所有使用的業務代碼。
前面我們介紹了三種工廠模式,在前端使用的過程中,要靈活的應用,使用其思想而不是生搬硬套。
工廠模式核心是通過不同參數來生成不同產品。抽象工廠和工廠是在實際場景下進行優化而來。
這也提醒我們,要不斷地對代碼進行思考,進行優化。
看完上述內容,是不是對如何使用javascript中的抽象工廠模式有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。