深入理解JavaScript系列（30）：設計模式之外觀模式詳解
介紹
外觀模式（Facade）為子系統(tǒng)中的一組接口提供了一個一致的界面，此模塊定義了一個高層接口，這個接口值得這一子系統(tǒng)更加容易使用。
正文
外觀模式不僅簡化類中的接口，而且對接口與調用者也進行了解耦。外觀模式經常被認為開發(fā)者必備，它可以將一些復雜操作封裝起來，并創(chuàng)建一個簡單的接口用于調用。
外觀模式經常被用于JavaScript類庫里，通過它封裝一些接口用于兼容多瀏覽器，外觀模式可以讓我們間接調用子系統(tǒng)，從而避免因直接訪問子系統(tǒng)而產生不必要的錯誤。
外觀模式的優(yōu)勢是易于使用，而且本身也比較輕量級。但也有缺點 外觀模式被開發(fā)者連續(xù)使用時會產生一定的性能問題，因為在每次調用時都要檢測功能的可用性。
下面是一段未優(yōu)化過的代碼，我們使用了外觀模式通過檢測瀏覽器特性的方式來創(chuàng)建一個跨瀏覽器的使用方法。
var addMyEvent = function (el, ev, fn) {
if (el.addEventListener) {
el.addEventListener(ev, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + ev, fn);
} else {
el['on' + ev] = fn;
}
};
再來一個簡單的例子，說白了就是用一個接口封裝其它的接口：
var mobileEvent = {
// ...
stop: function (e) {
e.preventDefault();
e.stopPropagation();
}
// ...
};
總結
那么何時使用外觀模式呢？一般來說分三個階段：
首先，在設計初期，應該要有意識地將不同的兩個層分離，比如經典的三層結構，在數(shù)據(jù)訪問層和業(yè)務邏輯層、業(yè)務邏輯層和表示層之間建立外觀Facade。
其次，在開發(fā)階段，子系統(tǒng)往往因為不斷的重構演化而變得越來越復雜，增加外觀Facade可以提供一個簡單的接口，減少他們之間的依賴。
第三，在維護一個遺留的大型系統(tǒng)時，可能這個系統(tǒng)已經很難維護了，這時候使用外觀Facade也是非常合適的，為系系統(tǒng)開發(fā)一個外觀Facade類，為設計粗糙和高度復雜的遺留代碼提供比較清晰的接口，讓新系統(tǒng)和Facade對象交互，F(xiàn)acade與遺留代碼交互所有的復雜工作。
參考：大話設計模式
- 設計模式中的facade外觀模式在JavaScript開發(fā)中的運用
- JavaScript設計模式之外觀模式介紹
- JavaScript設計模式之外觀模式實例
- javascript設計模式 – 裝飾模式原理與應用實例分析
- javascript設計模式 – 組合模式原理與應用實例分析
- javascript設計模式 – 橋接模式原理與應用實例分析
- javascript設計模式 – 適配器模式原理與應用實例分析
- JS中間件設計模式的深入探討與實例分析
- javascript設計模式 – 建造者模式原理與應用實例分析
- javascript設計模式 – 原型模式原理與應用實例分析
- javascript設計模式 – 外觀模式原理與用法實例分析
相關文章
本文詳細講解了JavaScript圖表插件highcharts的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
鑒于有同學在學習的時候容易混肴，所以筆者還是將其加以區(qū)別,需要的朋友可以參考下2013-07-07
本節(jié)是javascript語言的一個快速預覽，也是本書的第一部分快速預覽。有想閱讀此書的小伙伴，建議先讀下本系列文章。2015-02-02
這篇文章主要介紹了HTML form表單提交方法案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-08-08
Promise 是 ES6 新增的一個異步解決方案，它同 await 一樣，是異步的解決方案，但是相比于 await，Promise 可以同時統(tǒng)一處理多個異步操作。這一點是很方便的。下面我們來一起學習一下吧2019-06-06
JavaScript事件處理器中的event參數(shù)使用介紹
當一個事件處理器被觸發(fā)時，名為Event的類實例會作為第一個參數(shù)傳入處理器中，下面為大家詳細介紹下它的應用2013-05-05
下面小編就為大家?guī)硪黄猨avascript 繼承學習心得總結。小編覺得挺不錯的?，F(xiàn)在分享給大家。給大家做個參考2016-03-03
JavaScript函數(shù)中上下文有哪些規(guī)則
上下文是從英文context翻譯過來，指的是一種環(huán)境。在軟件工程中，上下文是一種屬性的有序序列，它們?yōu)轳v留在環(huán)境內的對象定義環(huán)境。在對象的激活過程中創(chuàng)建上下文，對象被配置為要求某些自動服務。又比如計算機技術中，相對于進程而言，上下文就是進程執(zhí)行時的環(huán)境2021-10-10
JavaScript學習筆記（一） js基本語法，想要學習js的朋友可以參考下。2011-10-10
這篇文章主要介紹了簡介JavaScript中的setTime()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06