web前端外觀模式的示例分析

這篇文章給大家分享的是有關(guān)web前端外觀模式的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

外觀模式（Facade Pattern）

外觀模式是最常見(jiàn)的設(shè)計(jì)模式之一，它為子系統(tǒng)中的一組接口提供一個(gè)統(tǒng)一的高層接口，使子系統(tǒng)更容易使用。簡(jiǎn)而言之外觀設(shè)計(jì)模式就是把多個(gè)子系統(tǒng)中復(fù)雜邏輯進(jìn)行抽象，從而提供一個(gè)更統(tǒng)一、更簡(jiǎn)潔、更易用的API。很多我們常用的框架和庫(kù)基本都遵循了外觀設(shè)計(jì)模式，比如JQuery就把復(fù)雜的原生DOM操作進(jìn)行了抽象和封裝，并消除了瀏覽器之間的兼容問(wèn)題，從而提供了一個(gè)更高級(jí)更易用的版本。其實(shí)在平時(shí)工作中我們也會(huì)經(jīng)常用到外觀模式進(jìn)行開(kāi)發(fā)，只是我們不自知而已。

1. 兼容瀏覽器事件綁定

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

1. 封裝接口

let myEvent = {
    // ...
    stop: e => {
        e.stopPropagation();
        e.preventDefault();
    }};

場(chǎng)景

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

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

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

優(yōu)點(diǎn)

• 減少系統(tǒng)相互依賴(lài)。

• 提高靈活性。

• 提高了安全性

缺點(diǎn)

• 不符合開(kāi)閉原則，如果要改東西很麻煩，繼承重寫(xiě)都不合適。

感謝各位的閱讀！關(guān)于“web前端外觀模式的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！