JavaScript設計模式系列四之外觀模式(附案例原始碼)

小錢錢阿聖發表於2017-11-25

文章初衷

設計模式其實旨在解決語言本身存在的缺陷,

目前javaScript一些新的語法特性已經整合了一些設計模式的實現,

大家在寫程式碼的時候,沒必要為了用設計模式而去用設計模式,

那麼我這邊為什麼還寫設計模式的文章呢,

一方面是自己的一個整理,然後記錄出來,結合自己的理解,

一方面就是雖然語言特性本身已經實現這些模式,有了自己的語法,

但是我們何嘗不能去了解一下它是通過什麼樣的思路去實現了

在我看來設計模式更多的是讓我對於思考問題,有了一些更好的思路和想法

文章實現更多的表現為用一些簡單的案例,幫助大家去理解這樣的一種思路,

會存在故意把設計模式的實現往簡單的案例靠攏,

大家在真實專案中不要刻意去用設計模式實現相同的程式碼

設計模式在平時的一些程式碼中都會有所體現,大家也許經常用到,

耐心看文章,也許你會發現自己平時的程式碼就不斷在設計模式中體現

JavaScript設計模式系列

JavaScript設計模式系列,講述大概20-30種設計模式在JavaScript中的運用

後面對應的篇幅會陸續更新,歡迎大家提出建議

這是設計模式系列第四篇,講述外觀模式

上篇文章講述了單例模式,有興趣可以檢視

注意

JavaScript設計模式系列github地址

深入系列文章部分是有先後順序的，按照目錄結構順序閱讀效果最好。

勘誤及提問

如果有疑問或者發現錯誤，可以在相應的 issues 進行提問或勘誤。

外觀模式

概念:

為一組複雜的子系統介面提供一個更高階的統一介面,

通過這個介面使得對子系統介面的訪問更容易

外觀模式又被稱作為門面模式

案例體現

有一個需求,要為document元素繫結一個點選事件,這時候我們就需要考慮到瀏覽器的相容性問題,但是每次繫結事件都要去判斷一些瀏覽器相容,顯然不是很合理,這時候我們就要用到外觀模式了,封裝一個統一的繫結事件方法,然後在這個方法裡面去做瀏覽器相容性的處理,統一暴露一個對外繫結事件的方法,
這就是我們所說的外觀模式了

程式碼體現

// 外觀模式實現
function addEvent(dom, type, fn){
    // 對於支援dom2級事件處理程式 addEventListener 方法的瀏覽器
    if(dom.addEventListener){
        dom.addEventListener(type,fn,false);
    }else if(dom.attachEvent){// 對於不支援addEventListener 方法但支援attachEvent 方法的瀏覽器
        dom.attachEvent('on'+type,fn);
    }else {
        dom['on'+ type] = fn;
    }
}

// 呼叫繫結事件
addEvent(document.getElementById('btn'),'click',function(){
    console.log('我是點選事件');
});複製程式碼

外觀模式的優點

提供統一對外介面,把複雜邏輯統一處理,對外呼叫更加容易

外觀模式總結

在javascript中,外觀模式是比較好理解的,jQuery當中就大量運用了這

樣的思想去解決瀏覽器相容性問題

注意