服务模式-外观模式

外观模式

/*外观模式：为一组复杂的子系统接口提供提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在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');