惰性模式

惰性模式就是在某种外界环境一定的情况下，减少代码的对环境的重复分支判断，以此提升代码执行性能。惰性模式模式不属于一般定义的23 种设计模式的范畴，而通常将其看作广义上的技巧型设计模式。

基本介绍

惰性模式就是通过对对象重新定义来屏蔽原对象中的分支判断，而我们的实现思路也非常简单，既然某种外界环境是确定的，后续不需要再去判断，那么只要将环境判断完成之后，重定义这个方法即可，只返回特定分支下的代码逻辑。 惰性模式的应用场景非常广泛，特别是当今浏览器种类繁多的现象，很多功能在不同浏览器中实现不一，为了兼容不同的浏览器，代码中往往会有许多对不同浏览器的分支判断，比如事件处理、XMLHttpRequest 对象创建等，造成代码臃肿冗余，惰性模式正好可以解决这种问题，提高代码执行效率。

对于以上的需求，我们有两种改进方式：

• 针对不同情况，返回不同策略，加载耗时，但是调用不耗时。
• 针对同情况显性定义，然后执行，首次加载不耗性能，首次调用占性能。

代码实现

通过针对不同浏览器的事件注册方法，提供惰性模式的两种实现方式。

const event = {}

event.addEvent = function (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
}

加载即执行

JavaScript文件加载时通过闭包执行对方法进行重新定义，在页面加载时会消耗一定的资源。

const event = {}

event.addEvent = (function (dom, type, fn) {
  if (dom.addEventListener) {
    return function (dom, type, fn) {
      dom.addEventListener(type, fn, false)
    }
  }
  else if (dom.attachEvent) {
    return function (dom, type, fn) {
      dom.attachEvent(`on${type}`, fn)
    }
  }
  else {
    return function (dom, type, fn) {
      dom[`on${type}`] = fn
    }
  }
}())

惰性执行

第一次执行函数时在函数内部对其进行显示重写，最后调用重写后的方法完成第一次方法调用。与加载即执行不同的是，Js 文件加载完成后，惰性执行的函数还没有被重新定义，当函数被首次调用时才会被重定义，这两种惰性方式都避免了冗余的分支判断。

const event = {}

event.addEvent = function (dom, type, fn) {
  if (dom.addEventListener) {
    event.addEvent = function (dom, type, fn) {
      dom.addEventListener(type, fn, false)
    }
  }
  else if (dom.attachEvent) {
    event.addEvent = function (dom, type, fn) {
      dom.attachEvent(`on${type}`, fn)
    }
  }
  else {
    event.addEvent = function (dom, type, fn) {
      dom[`on${type}`] = fn
    }
  }
  event.addEvent(dom, type, fn)
}