JavaScript设计模式之外观模式

July 5, 2015

596

外观(Facade)模式为对象提供了一个方便的高层次接口,能够隐藏其底层的真实复杂性,通常是为了提高可用性。

外观模式非常适合于浏览器脚本处理,可以将浏览器之间的差异隐藏在外观之后。比如说事件API、AJAX等,IE低版本浏览器和W3C标准存在一定差异,这时候可以提供一个“外观”给外部调用,将处理细节隐藏起来,同时也能将细节处理的代码从逻辑代码中解耦出来。

以下内容通过提供一个跨浏览器事件的接口来实现外观模式。

通过创建一个工具类utils,主要包含addEventListener和removeEventListener,通过检查特性的存在来提供一个更安全的、跨浏览器的API。代码如下:

var utils = {
  addEventListener: function (el, ev, handler) {
    if (el.addEventListener) {
      el.addEventListener(ev, handler, false);
    } else if (el.attachEvent) {
      el.attachEvent('on' + ev, handler);
    } else {
      el['on' + ev] = handler;
    }
  },
  removeEventListener: function (el, ev, handler) {
    if (el.addEventListener) {
      el.removeEventListener(ev, handler, false);
    } else if (el.attachEvent) {
      el.detachEvent('on' + ev, handler);
    } else {
      el['on' + ev] = null;
    }
  }
};

这就是一个外观模式。但这段代码存在一个问题,执行效率比较低下。每次在调用utils.addEventListener()或utils.removeEventListener()时,都会重复执行相同的检查。那么该如何优化这段代码?

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接