文章初衷

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

目前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當中就大量運用了這

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

注意

JavaScript設計模式系列github地址

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

關于設計模式,更多的是結合我自己的一些理解,把他總結出來分享給大家,如果大家發現有什么不正確的地方,希望大家一定得提出來,避免我這邊誤人子弟,感謝大家!!!

總結

以上是生活随笔為你收集整理的JavaScript设计模式系列四之外观模式(附案例源码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。