Rumah > hujung hadapan web > tutorial js > 详解js之外观模式

详解js之外观模式

零到壹度
Lepaskan: 2018-03-23 10:07:44
asal
1364 orang telah melayarinya

外观模式其实就是提供一个更高级的统一的接口,常用于处理兼容性统一或者封装,比如,处理绑定事件,下面以下两个例子为例。

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');
   })
Salin selepas log masuk

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','这是新添加的内容');
Salin selepas log masuk

   相关推荐:

JS设计模式——外观模式 

JS设计模式之外观模式

js 外观模式

Atas ialah kandungan terperinci 详解js之外观模式 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan