JavaScript的外觀模式

這次和大家說一下JS的設計理念，需要注意哪些方面，後面對應的篇幅會陸續更新,歡迎大家提出建議，我們之前說過單例模式,有興趣可以查看。

注意

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.achachEventEvent('on'+type,fnfn); dom['on'+ type] = fn;     } } // 呼叫綁定事件addEvent(document.getElementById('btn'),'click',function(){     console.log('我點擊事件'); });

外觀模式的優點

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

外觀模式總結

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

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

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS網頁錯位怎麼處理

CSS3的loading特效怎麼製作

CSS3怎麼製作蝴蝶飛舞的動畫

以上是JavaScript的外觀模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！