文章初衷

設(shè)計(jì)模式其實(shí)旨在解決語言本身存在的缺陷,

目前javaScript一些新的語法特性已經(jīng)集成了一些設(shè)計(jì)模式的實(shí)現(xiàn),

大家在寫代碼的時(shí)候,沒必要為了用設(shè)計(jì)模式而去用設(shè)計(jì)模式,

那么我這邊為什么還寫設(shè)計(jì)模式的文章呢,

一方面是自己的一個(gè)整理,然后記錄出來,結(jié)合自己的理解,

一方面就是雖然語言特性本身已經(jīng)實(shí)現(xiàn)這些模式,有了自己的語法,

但是我們何嘗不能去了解一下它是通過什么樣的思路去實(shí)現(xiàn)了

在我看來設(shè)計(jì)模式更多的是讓我對(duì)于思考問題,有了一些更好的思路和想法

文章實(shí)現(xiàn)更多的表現(xiàn)為用一些簡(jiǎn)單的案例,幫助大家去理解這樣的一種思路,

會(huì)存在故意把設(shè)計(jì)模式的實(shí)現(xiàn)往簡(jiǎn)單的案例靠攏,

大家在真實(shí)項(xiàng)目中不要刻意去用設(shè)計(jì)模式實(shí)現(xiàn)相同的代碼

設(shè)計(jì)模式在平時(shí)的一些代碼中都會(huì)有所體現(xiàn),大家也許經(jīng)常用到,

耐心看文章,也許你會(huì)發(fā)現(xiàn)自己平時(shí)的代碼就不斷在設(shè)計(jì)模式中體現(xiàn)

JavaScript設(shè)計(jì)模式系列

JavaScript設(shè)計(jì)模式系列,講述大概20-30種設(shè)計(jì)模式在JavaScript中的運(yùn)用

后面對(duì)應(yīng)的篇幅會(huì)陸續(xù)更新,歡迎大家提出建議

這是設(shè)計(jì)模式系列第四篇,講述外觀模式

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

注意

JavaScript設(shè)計(jì)模式系列g(shù)ithub地址

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

勘誤及提問

如果有疑問或者發(fā)現(xiàn)錯(cuò)誤，可以在相應(yīng)的 issues 進(jìn)行提問或勘誤。

外觀模式

概念:

為一組復(fù)雜的子系統(tǒng)接口提供一個(gè)更高級(jí)的統(tǒng)一接口,

通過這個(gè)接口使得對(duì)子系統(tǒng)接口的訪問更容易

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

案例體現(xiàn)

有一個(gè)需求,要為document元素綁定一個(gè)點(diǎn)擊事件,這時(shí)候我們就需要考慮到瀏覽器的兼容性問題,但是每次綁定事件都要去判斷一些瀏覽器兼容,顯然不是很合理,這時(shí)候我們就要用到外觀模式了,封裝一個(gè)統(tǒng)一的綁定事件方法,然后在這個(gè)方法里面去做瀏覽器兼容性的處理,統(tǒng)一暴露一個(gè)對(duì)外綁定事件的方法,
這就是我們所說的外觀模式了

代碼體現(xiàn)

// 外觀模式實(shí)現(xiàn) function addEvent(dom, type, fn){// 對(duì)于支持dom2級(jí)事件處理程序 addEventListener 方法的瀏覽器if(dom.addEventListener){dom.addEventListener(type,fn,false);}else if(dom.attachEvent){// 對(duì)于不支持addEventListener 方法但支持attachEvent 方法的瀏覽器dom.attachEvent('on'+type,fn);}else {dom['on'+ type] = fn;} }// 調(diào)用綁定事件 addEvent(document.getElementById('btn'),'click',function(){console.log('我是點(diǎn)擊事件'); });復(fù)制代碼

外觀模式的優(yōu)點(diǎn)

• 提供統(tǒng)一對(duì)外接口,把復(fù)雜邏輯統(tǒng)一處理,對(duì)外調(diào)用更加容易

外觀模式總結(jié)

在javascript中,外觀模式是比較好理解的,jQuery當(dāng)中就大量運(yùn)用了這

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

注意

JavaScript設(shè)計(jì)模式系列g(shù)ithub地址

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。