首頁 >web前端 >js教程 >詳解js之外觀模式

詳解js之外觀模式

零到壹度
零到壹度原創
2018-03-23 10:07:441328瀏覽

外觀模式其實就是提供一個更高級的統一的接口,常用於處理兼容性統一或者封裝,比如,處理綁定事件,下面以下兩個例子為例。

1. 封裝綁定事件:

#
function addEvent(dom,type,fn){    if(dom.addEventListener){
        dom.addEventListener(type,fn,false)
    } else if(dom.attachEvent){
        dom.attachEvent('on'+type,fn);
    } else {
        dom['on'+type]=fn;
   }
}

var myp = document.getElementById('myp');
addEvent(myp,'click',function(){
   console.log('hahah');
   })

2.也可以用外觀模式封裝多個功能:

var A={    get:function(id){
        return document.getElementById(id)
        }
    css:function(id,key,value){
        this.get(id).style[key]=value;
        }
    html:function(id,content){
        this.get(id).innerHTML=content;
        }
A.html('box','这是新添加的内容');

   相關建議:

JS設計模式-外觀模式 

#JS設計模式之外觀模式

js 外觀模式

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn