更优雅的事件触发兼容


Posted in Javascript onOctober 24, 2011

问题种种

做底层接口兼容,无非就是利用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!') 
}

换言之,过程是:

如果客户端支持新接口,就将兼容层绑定到新接口上
否则,如果客户端支持老接口/不一致接口,就将兼容层绑定到老接口上
否则,如果可以的话,给出错误回馈

亦即,兼容层程序是从高空“掉”下来,如果客户端支持“高级”特性(新接口、标准接口)就将它“接住”——兼容层就有了归宿;否则继续向下掉——哦,老接口接住了,就用老接口;如果一直没人接住,于是——啪——摔倒了地上,并且用最后一口气喊一声:“你用的客户端太小众,我拿你没办法了!”

这和什么比较像?

事实上,如果你了解JavaScript对象系统的机理,你就可以类比:这不就是原型嘛!原型系统就是利用了这种跌落——寻找某个成员,如果它在这个对象里定义了,就返回之;否则沿着原型链向上搜(没错,这次是向上的),如此重复,直到真的连原型链都到头的时候,返回个undefined。

说做就做!这里同样用addEvent为例。首先,我们定义一个空驱动,它里面什么都不包含:

var nullDriver = {}

然后,就是创建个对象,并且把原型链指向它。在ECMA V5时代,我们可以用Object.create,可惜,现在还有N多老客户端(否则做什么兼容啊),所以自己craft个函数:

var derive = Object.create ? Object.create: function() { 
var T = function() {}; 
return function(obj) { 
T.prototype = obj; 
return new T 
} 
}()

这个用法你可能会觉得很诡异,但它工作起来一点问题没有,速度也不慢——能达到Object.create的一半。我们就用这个derive开动:
var dhtmlDriver = derive(nullDriver); 
var dhtmlDriverBugfix = derive(dhtmlDriver);

这里的bugfix是针对一些“bug”和特殊情况定义的特别Driver。这里你可以忽略它。好了,DHTML里面addEvent是什么来着?
if (supportsAttachEvent) { 
dhtmlDriver.addEvent = function(e, what, how) { 
e.attachEvent('on' + what, how) 
} 
}

然后呢?位于原型链最前端的应该是W3C的标准驱动啊,写上!
var w3cDriver = derive(dhtmlDriverBugfix); 
var w3cDriverBugfix = derive(w3cDriver); if (supportsAddEventListener) { 
w3cDriver.addEvent = function(e, what, how) { 
e.addEventListener(what, how) 
} 
}

最后,我们就放个东西上去做最后调用的接口。(因为w3cDriverBugfix太难看……)

var driver = derive(w3cDriverBugfix);

然后就调用好了。看,这就让那些长得吓人的分支判断变得简单有效,但不失fallback本色:在支持addEventListener上调用addEvent等价于调用w3cDriver.addEvent,而在不支持addEventListener的客户端上就会跌落到底下,比如调用dhtmlDriver.addEvent。另外,进行bugfix也很容易——可以在专门的“bugfix”层进行hook,而原有层丝毫不受影响。
等等,继承这么多层

会很慢么?诚然,那么深的原型链肯定会慢,不过我有办法。还记得给对象的属性写入时会发生什么事情吗?

var ego = function(x) {return x} 
for (var each in driver) { 
if (! (each in nullDriver)) { 
driver[each] = ego(driver[each]) 
} 
}

没错,原来高企在原型链上面的方法会“哗”的一下掉到最下面!这回不用沿着原型链向上搜了,直接从最底端获取属性即可。这里用ego函数的原因是防止一些浏览器“优化掉”这里的代码。
总结

虽然这里谈兼容,可是,它的精华却在语言特性上——利用原型继承,我们可以很优雅地完成这个令人头疼的操作。是的,框架的美感不应该只在外表,其内部——即使是最最令人烦的内部——也同样要优雅。

这里的技术可以在dess中找到。
来自:typeof.net

Javascript 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 #Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 #Javascript
关于javascript function对象那些迷惑分析
Oct 24 #Javascript
文本框根据输入内容自适应高度的代码
Oct 24 #Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 #Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 #Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 #Javascript
You might like
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python实现telnet服务器的方法
2015/07/10 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
早餐连锁店计划书
2014/01/08 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
爱国演讲稿500字
2014/05/04 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
四风之害观后感
2015/06/09 职场文书
高三生物教学反思
2016/02/22 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书