js更优雅的兼容
2024-05-06 14:27:44
供稿：网友
问题种种做底层接口兼容，无非就是利用if，判断客户端支持哪个接口的问题。最著名的例子就是事件：
代码如下:
var addEvent = function(e, what, how) {
if (e.addEventListener) e.addEventListener(what, how, false)
else if (e.attachEvent) e.attachEvent('on' + what, how)
}
这里考虑了给元素绑定事件时可能遇到的两种状况——标准的W3C DOM接口以及DHTML提供的接口。当然这个例子还很粗糙，但足够说明问题了。
原先的方法是在兼容层调用有现场判断并进入相应的if分支。很显然，这种“现场判断”的方法效率并不高。后来，人们采用这样的办法：
代码如下:
if (MSIE) {
addEvent = function(e, what, how) {
e.attachEvent('on' + what, how);
}
} else {
addEvent = function(e, what, how) {
e.addEventListener(what, how);
}
}
在一次判断后给addEvent绑定不同的代码，从而免去了运行时的分支判断。
很可惜，这个问题也不小。首先把“采用attachEvent”和“客户端是MSIE”绑定在一起是个很过时的想法。假如微软哪天良心发现了怎么办？这事情现在就发生了——IE9明确支持了DOM接口，甚至DOM3都支持。结果，就这个“良心发现”的举动会毁掉许多前端库，他们必须被迫修改代码（如同IE8来时那样）。况且这种做法没有考虑“未知的客户端”——据我所知，Google发布Chrome后也导致不少类库重写代码。
特性检测那究竟该怎么做？特性检测就可以最大限度地避免“新客户端”带来的麻烦——通过一组在类库初始化时定义的代码来检测客户端拥有的特性，并利用这一组检测值绑定类库代码：
代码如下:
var supportsAddEventListener = !!(checkerElement.addEventListener);
if (supportsAddEventListener) {
addEvent = function(e, what, how) {
e.addEventListener(what, how);
}
} else if (supportsAttachEvent) {
addEvent = function(e, what, how) {
e.attachEvent('on' + what, how);
}
}
特性检测实际上是将“使用某个客户端”和“支持某个特性”进行解耦——让if分支直接针对“特性有无”（接口是否一致）判断，从而消除客户端制造商“良心发现”造成的“好心办坏事”。事实上这么做也是符合历史潮流之选——当标准接口逐渐普及，客户端之间渐渐“表征一致”时，为什么不做个一致的兼容层接口呢？
跌落让我们重新看看这些代码。通常，一条利用特性检测进行兼容的代码往往是这样：
代码如下:
if (new_interface_detected) {
comp = function() {uses_new_interface};
} else if (old_interface_detected) {
comp = function() {uses_old_interface};
} else {
throw new Error('Unadaptable!')
}
换言之，过程是：
如果客户端支持新接口，就将兼容层绑定到新接口上
