外觀模式_JavaScript 設計模式 8

一.外觀模式

對底層組件接口進行二次封裝（三手、四手的也算二手），提供更易用的高層接口，這是外觀模式的核心思想。

外觀，很容易聯想到化妝，不過這裡不是為了好看，而只是圖好用。

二.具體實現

var mod1 = {
    fun1: function() {
        // ...
    },
    fun2: function() {
        // ...
    }
    // ...
}
var mod2 = {
    fun1: function() {
        // ...
    },
    fun2: function() {
        // ...
    }
    // ...
}
// ...

// facade
var facade = {
    c: true,

    newFun1: function() {
        mod1.fun2();
        if (this.c) {
            mod1.fun1();
        }
        // ...
    },
    newFun2: function() {
        mod2.fun1();
        mod2.fun2();
        mod1.fun1();
        if (this.c) {
            mod1.fun2();
        }
        // ...
    }
    // ...
}

// invoke facade
facade.newFun1();
// invoke mods
// mod1.fun2();
// if (c) {
//     mod1.fun1();
// }
// ...

對低層模塊的接口進行進一步抽象，封裝出簡單易用的外觀，封裝是沒有盡頭的，從模塊內部到模塊間，到子系統間，再到系統本身，只要願意接著做，可以添上 n 層封裝，甚至可以用外觀模式解決方法名過長的問題，例如：

var d = {
    byId: function(strId) {
        return document.getElementById(strId);
    },
    byClass: function(strClass) {
        return document.getElementsByClassName(strClass);
    },
    byTag: function(strTag) {
        return document.getElementsByName(strTag);
    }
    // ...
}

// test
d.byId('test').innerHTML = 'test facade';

三.外觀模式的優缺點

優點

書上有一句比較貼切的話：

不需要關註實現細節，而且更容易使用

缺點

多層封裝意味著長調用鏈，存在性能成本，如果對性能要求很高，自然是封裝層數越少越好，越靠近底層執行效率越高，使用外觀模式時，可能需要考慮是否值得二次封裝（性能成本是否可以接受）

至於 JQuery 的$比原生 JS 實現慢多少，答案是：其實沒有你想象的那麼慢

關於外觀模式的更多信息，請查看 黯羽輕揚：設計模式之外觀模式（Facade Pattern）

參考資料

• 《JavaScript 設計模式》