Javascript设计模式Facade

Posted 2020-10-02 咚咚锵咚呛

外观模式

//为复杂的子系系统提供一个更高级的统一接口

//外观模式实现兼容

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 A={
        g:function(id){
            return document.getElementById(id);
        },
        css:function(id,key,value){
            document.getElementById(id).style[key]=value
        },
        attr:function(id,key,value){
            document.getElementById(id)[key]=value
        },
        html:function(id,html){
            document.getElementById(id).innerHTML=html;
        },
        on:function(id,type,fn){
            document.getElementById(id)[‘on‘+type]=fn;
        }
    }
    A.css("box","background","red");
    A.attr("box","className","boxStyle");
    A.html("box","张三");
    A.on("box","click",function(){
        console.log(2222)
    })