外观模式

        // 在项目中,团队开发过程中,如果你想给一个元素添加一个点击事件,另一个人也要添加点事件怎么办?
        // 封装一个类
        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 box = document.getElementById('box');

        // 错误演示:
        box.onclick = function(){   // 甲给元素添加事件
            alert(1);
        }
        box.onclick = function(){   // 乙给元素添加事件
            alert(2);
        }
        // 上面案例 乙的点击事件覆盖甲的事件逻辑
        // 通过封装的小函数来实现:
        var box2 = document.getElementById('box2');

        addEvent(box2,'click',function(){
            alert(1);
        })
        addEvent(box2,'click',function(){
            alert(2);
        })

你可能感兴趣的:(外观模式)