门面模式是什么

外部与一个子系统的通信必须通过一个系统的一个门面对象进行，这就是门面模式。 它有两个作用，一是简化类的接口，二是消除类与使用它的客户代码的耦合

门面模式之利

• 简化接口
• 减少与子系统的耦合
• 降低对外部代码的依赖

门面模式之弊

• 不符合开闭原则，对扩展开发，对修改关闭

适用场合

• 事件监听器

 function addEvent(el,type,fn) {
      if (window.addEventListener) {
        el.addEventListener(type,fn,false)
      }
      else if (window.attachEvent) {
        el.attachEvent('on'+type , fn)
      }
      else{
        el['on'+type] = fn;
      }
    }

• js库

JavaScript库是人为设计的。设计它们的目的在于节省时间、简化常见任务和提供比每个浏览器都实现了的内置JavaScript函数更易于使用的接口。

• 便利方法

  var DED = window.DED || {};
  DED.util = {
     //阻止冒泡
    stopPropagation:function(e){
      if (e.stopPropagation) {
        e.stopPropagation
      }
      else{
        e.cancelBubble = true
      }   
    },
     // 阻止默认行为
    preventDefault:function(e){
      if (e.preventDefault) {
        e.preventDefault()
      }
      else{
        e.returnValue = true;
      }
    },
    stopEvent:function(e){
      DED.util.stopPropagation(e);
      DED.util.preventDefault(e);
    }
  }

一个栗子

  // 例如想要将ID为content的div元素的文本颜色设置为红色，可以使用下面的代码
  var element = document.getElementById('content');
  element.style.color = 'red';
  // 现在假设要一次设置几个元素的某个样式。如果有三个ID分别为foo、bar和baz的元素，并且想把它们的文本颜色设置为红色 可以这样做
  var element1 = document.getElementById('foo')
  element1.style.color = 'red'
  var element2 = document.getElementById('bar')
  element2.style.color = 'red'
  var element3 = document.getElementById('baz')
  element3.style.color = 'red'
  // 这样不停的写getElementById并且为每一个元素设置同样的属性和值不够优雅。
  // 为了代码更加优雅，我们来写一个门面元素来简化我们的工作。
  setStyle(['foo','bar','baz'],'color','red');
  //  逆向思维  先写出怎么用  然后再来设计这个函数
  function setStyle(elements,prop,val) {
    for (let i = 0; i < elements.length; i++) {
      document.getElementById(elements[i]).style[prop] = val;
      
    }
  }
  // 我们还可以设计一个更复杂的接口，把所有逻辑都组合在另一个门面元素中。以便一次调用就可以处理所有问题 我们把它命名为setCSS
  setCSS(['foo'],{
    positon:"absolute",
    top:"50px",
    left:"300px"
  })
  function setCss(el,styles) {
    for (var prop in styles) {
      if (!styles.hasOwmProperty(prop)) continue;
      setStyle(el,prop,styles[prop])
      
    }
  }
  // 现在我们就可以像这样一次设置多个元素的多个样式
  setCSS(['foo','bar','baz'],{
    color:"red",
    background:"black",
    fontSize:"16px",
  })