深入理解JavaScript系列（30）：設計模式之外觀模式詳解

 這篇文章主要介紹了深入理解JavaScript系列（30）：設計模式之外觀模式詳解,外觀模式（Facade）為子系統中的一組接口提供了一個一致的界面,此模塊定義了一個高層接口,這個接口值得這一子系統更加容易使用,需要的朋友可以參考下

   

介紹

外觀模式（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與遺留代碼交互所有的復雜工作。