javascript-设计模式-外观模式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/79073629

外观模式 ：

- 为一组复杂的子系统接口提供一个更高级的同意接口，通过这个接口是的对子系统接口的访问更容易，
- 对底层结构兼容型做同意封装来简化用户使用

Example

• 点击事件的兼容性封装

• 浏览器对点击事件存在兼容性问题，对DOM绑定onclick事件为DOM0级事件，相当与为元素绑定了一个事件方法，重复定义会覆盖。

    <div id="dom"></div>

     var oDom = document.getElementById("dom");

      //DOM0 级事件绑定方法会将方法覆盖
      oDom.onclick = function(){
          console.log("111111");
      }

      oDom.onclick = function(){
          console.log("222222");
      }
    //结果只会输出222222

• 所以应该使用DOM2级事件绑定方法addEventListener(),然而低于IE9是不支持addEventListener(),所以需要使用attachEvent()

     // DOM2级 可以反复为元素绑定事件，不会覆盖  
     // addEventListener 兼容 firefox chrome  IE9+
     // attachEvent 兼容 IE9-
     oDom.addEventListener("click",function(params) {
         console.log("addEventListener__111111");
     })

     oDom.addEventListener("click",function(params) {
         console.log("addEventListener__222222");
     })

    //每次点击，两个绑定事件都会触发，不会覆盖

• 如果有些不支持DOM2级事件处理程序的浏览器只能使用 onclick方法绑定事件。

兼容性统一封装 外观模式实现

//外观模式
function addEvent(dom,type,fn){
    //对于支持DOM2级事件处理程序addEventListener方法的浏览器
    if(dom.addEventListener){
        dom.addEventListener(type,fn,false);  //false 阻止事件冒泡

        //对于不支持addEventListener方法但支持attachEvent方法的浏览器
    }else if(dom.attachEvent){
        dom.addEvent("on"+type,fn);

        //对于不支持addEventListener和attachEvent但支持on+type的浏览器
    }else{
        dom["on"+type] = fn;
    }
}

• 调用
  addEvent(oDom,”click”,function(){
  console.log(“addEvent()”);
  });