javascript设计模式—

javascript设计模式——外观模式

作者: 蟹老板爱写代码 | 来源:发表于2018-03-30 15:54 被阅读0次

摘要：外观模式是对接口方法的外层包装，以供上层代码调用。例如浏览器事件绑定，因为不同浏览器实现的不一致，我们可以通过外观模型进行包装，给外部开放统一接口。

实现：兼容所有浏览器版本的事件监听。

<body>
  <div id="myInput">我是个按钮</div>
  <script>
      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 myInput = document.getElementById('myInput')
      addEvent(myInput, 'click', function () {
        console.log('绑定第一个点击事件')
      })
      addEvent(myInput, 'click', function () {
        console.log('绑定第二个点击事件')
      })
    </script>
</body>