JavaScript设计模式（八）：套餐服务-外观模式

外观模式（Facade）

为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。

在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。

需求：为指定按钮添加一个事件

document.onclick = function (e) {
   
    if (e.target === document.getElementById('btn01')) {
   
        alert('btn01 的点击事件');
    }
};

• ⚠ 注意：以上方法的缺点：

  • 为 document 绑定了 onclick 事件，但 onclick 是 DOM0级事件，也就是说这种方式绑定的事件相当于为元素绑定一个事件方法，所以如果团队中有人再次通过这种方式为 document 绑定 click 事件时，就相当于重复定义了一个方法，会将你定义的 click 事件方法覆盖，如下列程序：

      document.onclick = function (e) {
           
          if (e.target === document.getElementById('btn01')) {
           
              alert('btn01 的点击事件');
          }
      };
    
      document.onclick = function (e){
           
          console.log('document事件覆盖掉了上边的事件');
      };
    

• 外观模式实现优化：应使用 DOM2级事件 处理程序提供的方法 addEventListener 来实现

    // 外观模式实现
    function addEvent(dom, type, fn) {
       
        // 对于支持DOM2级事件处理程序addEventListener方法的浏览器
        if (dom.addEventListener) {
       
            dom.addEventListener(type, fn, false);
            // 对于不支持addEventListener方法但支持attachEvent方法的浏览器
        } else if (dom.attachEvent) {
       
            dom.attachEvent('on' + type, fn);
            // 对于不支持addEventListener方法也不支持attachEvent方法，但支持on+'事件名'的浏览器
        } else {
       
            dom['on' + type] = fn;
        }
    }
  
    addEvent(document.getElementById('btn01'), 'click', function (e) {
       
        alert('btn01 的点击事件');
    });
  
    addEvent(document, 'click', function (e) {
       
        console.log('document事件覆盖掉了上边的事件');
    });
  

特点：

规整复杂接口，解决兼容问题