JavaScript 框架提供了如此多的功能,以至于一不小心就会掉进坑里去。 对工具库依赖得越多,在修改或维护时一个小小的改的很可能就会影响到其他的功能(俗称 处处是地雷,走路需谨慎),特别是维护多年前的遗留代码时。 我经常看到的一个错误是关于 jQuery的 trigger, trigger允许开发者手动触发某些事件。 这个功能真的非常强大与好用,但是请遵守约定,不要触发JS中那些原生的事件名称!
注:我知道,其他JS框架也提供这种功能 —— 我只用jQuery作为一个例子,因为我看到了它的受欢迎程度,最近又刚好碰上这个问题。 而所有工具类库都有可能引发同样的问题。 比如 MooTools使用 的 fireEvent 等。
下面是使用 trigger 来完成任务的一个典型例子:
// 监听 click 事件
jQuery('.tabs a').on('click', function() {
// 执行某些操作,比如切换界面,加载内容等..
});
// 在最后一个 a 标签上触发 click 事件
jQuery('.tabs a').last().trigger('click');
上面的代码将会打开给定index的tab标签。 我完全理解开发者使用 trigger 来处理这些事情的原因,通常是因为要触发的函数在全局范围内不可用,而触发事件是很容易的,也总是可用的。 问题是,使用原生的事件名称来触发可能 ... 触发 ... 一些无法言说的伤。让我们来看看在网站的其他地方添加的内容:
// 监听 body 内部的所有 click 事件
jQuery('body').on('click', 'a', function() {
// 此处可以进行一些业务逻辑处理 ...
// 满足条件(Condition met), 则进行另外一些操作!
if(conditionMet) {
// 刷新页面?
// 打开子菜单?
// 提交表单?
// ... 灯灯蹬蹬,Intel
}
});
现在有一个问题 —— 选项卡单击事件可能被其他完全独立的部分监听着,这处理起来就比较麻烦。 呵呵,最好的解决方案是使用一个自定义的事件名称跟在原生事件后面:
// 监听 click 事件时,带上自定义的事件
jQuery('.tabs a').on('click tabs-click', function() {
// 切换 tab, 加载内容,等等等等 ...
});
// 在最后一个标签上触发 "假" 的事件
jQuery('.tabs a').last().trigger('tabs-click');
现在你的事件触发器将不再和页面上的其他监听器起冲突。 保守的开发人员对我说,你可能想要避免使用 trigger (其他工具库也是一样的),但好歹你也应该添加一个自定义事件名称!
Stellungnahme:Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn