外观模式
/*外观模式：为一组复杂的子系统接口提供提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用*/
document.onclick=function(e){
e.preventDefault();
if(e.target!==document.getElementById('myInput')){
hidePageAlert();
}
};
function hidePageAlert(){
//隐藏提示框
}
/*下次再为document绑定onclick事件时将会覆盖掉前面的onclick事件，所以这种方式是很危险的，应该使用DOM2级事件处理提供的方法，有的浏览器不兼容DOM2级方法，因此需要兼容*/
/*兼容方式-用外观模式来封装*/
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;
}
}
/*这样直接使用addEvent函数就能绑定事件了，省去了兼容的麻烦*/
/*对于支持addEventListener和attachEvent方法的浏览器可以放心的绑定多个事件*/
var myInput=document.getElementById("myInput");
addEvent(myInput,'click',function(){
console.log('绑定第一个事件');
});
addEvent(myInput,'click',function(){
console.log('绑定第二个事件');
});
addEvent(myInput,'click',function(){
console.log('绑定第三个事件');
});
/*获取事件对象的兼容方式*/
var getEvent=function(event){
return event || window.event;
};
/*获取元素的兼容方式*/
var getTarget=function(event){
var event=getEvent(event);
return event.target || event.srcElement;
};
/*阻止默认行为的兼容方式*/
var preventDefault=function(event){
var event=getEvent(event);
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
};
/*那么针对一开始写的东西就可以这么用了*/
addEvent(document,'click',function(e){
preventDefault(e);
if(getTarget(e)!==document.getElementById('myInput')){
hidePageAlert();
}
});
/*很多代码库中都是通过外观模式来封装多个功能，简化底层操作方法*/
var Method={
getId:function(id){
return document.getElementById(id);
},
css:function(id,key,value){
this.getId(id).style[key]=value;
},
attr:function(id,key,value){
this.getId(id)[key]=value;
},
html:function(id,html){
this.getId(id).innerHTML=html;
},
on:function(id,type,fn){
this.getId(id)['on'+type]=fn;
}
};
Method.css('box','background','red');
Method.attr('box','className','box');
Method.on('box','click',function(){
console.log(this);//div#box
Method.css('box','width','500px');
});
/*当然如果你想连缀调用的话，你可以在封装的函数里返回this，比如 */
var Method={
getId:function(id){
return document.getElementById(id);
},
css:function(id,key,value){
this.getId(id).style[key]=value;
return this;
},
attr:function(id,key,value){
this.getId(id)[key]=value;
return this;
},
html:function(id,html){
this.getId(id).innerHTML=html;
return this;
},
on:function(id,type,fn){
this.getId(id)['on'+type]=fn;
return this;
}
};
Method.on('box','click',function(){
console.log(this);//div#box
Method.css('box','width','500px');
}).css('box','height','500px');
外观模式
/*外观模式：为一组复杂的子系统接口提供提供一个更高级的统一接口，通过这个接口使得对子系
阅读背景：
服务模式-外观模式
来源：互联网
分享到：
