javascript设计模式——外观模式

2018-03-30  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读