JavaScript 設(shè)計(jì)模式之外觀(guān)模式

2018-07-28 17:40 更新

介紹

外觀(guān)模式（Facade）為子系統(tǒng)中的一組接口提供了一個(gè)一致的界面，此模塊定義了一個(gè)高層接口，這個(gè)接口值得這一子系統(tǒng)更加容易使用。

正文

外觀(guān)模式不僅簡(jiǎn)化類(lèi)中的接口，而且對(duì)接口與調(diào)用者也進(jìn)行了解耦。外觀(guān)模式經(jīng)常被認(rèn)為開(kāi)發(fā)者必備，它可以將一些復(fù)雜操作封裝起來(lái)，并創(chuàng)建一個(gè)簡(jiǎn)單的接口用于調(diào)用。

外觀(guān)模式經(jīng)常被用于JavaScript類(lèi)庫(kù)里，通過(guò)它封裝一些接口用于兼容多瀏覽器，外觀(guān)模式可以讓我們間接調(diào)用子系統(tǒng)，從而避免因直接訪(fǎng)問(wèn)子系統(tǒng)而產(chǎn)生不必要的錯(cuò)誤。

外觀(guān)模式的優(yōu)勢(shì)是易于使用，而且本身也比較輕量級(jí)。但也有缺點(diǎn) 外觀(guān)模式被開(kāi)發(fā)者連續(xù)使用時(shí)會(huì)產(chǎn)生一定的性能問(wèn)題，因?yàn)樵诿看握{(diào)用時(shí)都要檢測(cè)功能的可用性。

下面是一段未優(yōu)化過(guò)的代碼，我們使用了外觀(guān)模式通過(guò)檢測(cè)瀏覽器特性的方式來(lái)創(chuàng)建一個(gè)跨瀏覽器的使用方法。

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;
    }
};

再來(lái)一個(gè)簡(jiǎn)單的例子，說(shuō)白了就是用一個(gè)接口封裝其它的接口：

var mobileEvent = {
    // ...
    stop: function (e) {
        e.preventDefault();
        e.stopPropagation();
    }
    // ...
};

總結(jié)

那么何時(shí)使用外觀(guān)模式呢？一般來(lái)說(shuō)分三個(gè)階段：

首先，在設(shè)計(jì)初期，應(yīng)該要有意識(shí)地將不同的兩個(gè)層分離，比如經(jīng)典的三層結(jié)構(gòu)，在數(shù)據(jù)訪(fǎng)問(wèn)層和業(yè)務(wù)邏輯層、業(yè)務(wù)邏輯層和表示層之間建立外觀(guān)Facade。

其次，在開(kāi)發(fā)階段，子系統(tǒng)往往因?yàn)椴粩嗟闹貥?gòu)演化而變得越來(lái)越復(fù)雜，增加外觀(guān)Facade可以提供一個(gè)簡(jiǎn)單的接口，減少他們之間的依賴(lài)。

第三，在維護(hù)一個(gè)遺留的大型系統(tǒng)時(shí)，可能這個(gè)系統(tǒng)已經(jīng)很難維護(hù)了，這時(shí)候使用外觀(guān)Facade也是非常合適的，為系系統(tǒng)開(kāi)發(fā)一個(gè)外觀(guān)Facade類(lèi)，為設(shè)計(jì)粗糙和高度復(fù)雜的遺留代碼提供比較清晰的接口，讓新系統(tǒng)和Facade對(duì)象交互，F(xiàn)acade與遺留代碼交互所有的復(fù)雜工作。

參考：大話(huà)設(shè)計(jì)模式


以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)