外观(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()时,都会重复执行相同的检查。那么该如何优化这段代码?