深入理解JavaScript系列（30）：設計模式之面板模式詳解_基礎知識

介紹

面板模式（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與遺留代碼互動所有的複雜工作。

參考：大話設計模式