## 介紹
外觀模式(Facade)為子系統中的一組接口提供了一個一致的界面,此模塊定義了一個高層接口,這個接口值得這一子系統更加容易使用。
## 正文
外觀模式不僅簡化類中的接口,而且對接口與調用者也進行了解耦。外觀模式經常被認為開發者必備,它可以將一些復雜操作封裝起來,并創建一個簡單的接口用于調用。
外觀模式經常被用于JavaScript類庫里,通過它封裝一些接口用于兼容多瀏覽器,外觀模式可以讓我們間接調用子系統,從而避免因直接訪問子系統而產生不必要的錯誤。
外觀模式的優勢是易于使用,而且本身也比較輕量級。但也有缺點 外觀模式被開發者連續使用時會產生一定的性能問題,因為在每次調用時都要檢測功能的可用性。
下面是一段未優化過的代碼,我們使用了外觀模式通過檢測瀏覽器特性的方式來創建一個跨瀏覽器的使用方法。
~~~
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();
}
// ...
};
~~~
## 總結
那么何時使用外觀模式呢?一般來說分三個階段:
**首先**,在設計初期,應該要有意識地將不同的兩個層分離,比如經典的三層結構,在數據訪問層和業務邏輯層、業務邏輯層和表示層之間建立外觀Facade。
**其次**,在開發階段,子系統往往因為不斷的重構演化而變得越來越復雜,增加外觀Facade可以提供一個簡單的接口,減少他們之間的依賴。
**第三**,在維護一個遺留的大型系統時,可能這個系統已經很難維護了,這時候使用外觀Facade也是非常合適的,為系系統開發一個外觀Facade類,為設計粗糙和高度復雜的遺留代碼提供比較清晰的接口,讓新系統和Facade對象交互,Facade與遺留代碼交互所有的復雜工作。
參考:大話設計模式
- (1)編寫高質量JavaScript代碼的基本要點
- (2)揭秘命名函數表達式
- (3)全面解析Module模式
- (4)立即調用的函數表達式
- (5)強大的原型和原型鏈
- (6)S.O.L.I.D五大原則之單一職責SRP
- (7)S.O.L.I.D五大原則之開閉原則OCP
- (8)S.O.L.I.D五大原則之里氏替換原則LSP
- (9)根本沒有“JSON對象”這回事!
- (10)JavaScript核心(晉級高手必讀篇)
- (11)執行上下文(Execution Contexts)
- (12)變量對象(Variable Object)
- (13)This? Yes, this!
- (14)作用域鏈(Scope Chain)
- (15)函數(Functions)
- (16)閉包(Closures)
- (17)面向對象編程之一般理論
- (18)面向對象編程之ECMAScript實現
- (19)求值策略
- (20)《你真懂JavaScript嗎?》答案詳解
- (21)S.O.L.I.D五大原則之接口隔離原則ISP
- (22)S.O.L.I.D五大原則之依賴倒置原則DIP
- (23)JavaScript與DOM(上)——也適用于新手
- (24)JavaScript與DOM(下)
- (25)設計模式之單例模式
- (26)設計模式之構造函數模式
- (27)設計模式之建造者模式
- (28)設計模式之工廠模式
- (29)設計模式之裝飾者模式
- (30)設計模式之外觀模式
- (31)設計模式之代理模式
- (32)設計模式之觀察者模式
- (33)設計模式之策略模式
- (34)設計模式之命令模式
- (35)設計模式之迭代器模式
- (36)設計模式之中介者模式
- (37)設計模式之享元模式
- (38)設計模式之職責鏈模式
- (39)設計模式之適配器模式
- (40)設計模式之組合模式
- (41)設計模式之模板方法
- (42)設計模式之原型模式
- (43)設計模式之狀態模式
- (44)設計模式之橋接模式
- (45)代碼復用模式(避免篇)
- (46)代碼復用模式(推薦篇)
- (47)對象創建模式(上篇)
- (48)對象創建模式(下篇)
- (49)Function模式(上篇)
- (50)Function模式(下篇)
- (結局篇)