這次和大家說一下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中文網其它相關文章!
相關閱讀:
以上是JavaScript的外觀模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!