Javascript框架的自定义事件

Dean Edwards 最近有篇文章很精彩，忍不住在这里翻译下。

-- Split --

很多 Javascript 框架都提供了自定义事件（custom events），例如 jQuery、YUI 以及 Dojo 都支持“document ready”事件。而部分自定义事件是源自回调（callback）。

回调将多个事件句柄存储在数组中，当满足触发条件时，回调系统则会从数组中获取对应的句柄并执行。那么，这会有什么陷阱呢？在回答这个问题之前，我们先看下代码。

下面是两段代码依次绑定到 DOMContentLoaded 事件中

document.addEventListener("DOMContentLoaded", function() {
  console.log("Init: 1");
  DOES_NOT_EXIST++; // 这里会抛出异常
}, false);

document.addEventListener("DOMContentLoaded", function() {
  console.log("Init: 2");
}, false);

那么运行这段代码会返回什么信息？显然，会看见这些（或者类似的）：

Init: 1
Error: DOES_NOT_EXIST is not defined
Init: 2

可以看出，两段函数都被执行。即使第一个函数抛出了个异常，但并不影响第二段代码运行。

麻烦

OK，我们回来看下常见框架中的回调系统。首先，我们看下 jQuery 的（因为它很流行）：

$(document).ready(function() {
  console.log("Init: 1");
  DOES_NOT_EXIST++; // 这里会抛出异常
});

$(document).ready(function() {
  console.log("Init: 2");
});

然后控制台中输出了什么？

Init: 1
Error: DOES_NOT_EXIST is not defined

这样问题就很明了了。回调系统其实很脆弱 -- 如果中间有段代码抛出了异常，那么其余将不会被执行。想象下在实际情况中，这后果可能会更严重，譬如有些糟糕的插件可能会“一粒老屎坏了一锅粥”。

其他的框架，Dojo 的情况和 jQuery 类似，不过 YUI 的情况有些许不同。在它的回调系统中，使用了 try/catch 语句避免因异常发生的中断。但有个小小的负面影响，就是看不到相应的异常了。

YAHOO.util.Event.onDOMReady(function() {
  console.log("Init: 1");
  DOES_NOT_EXIST++; // 这里会抛出异常
});

YAHOO.util.Event.onDOMReady(function() {
  console.log("Init: 2");
});

输出：

Init: 1
Init: 2

那么，有无完美的解决方案呢？

解决方案

我想到了个解决方案，就是将回调和事件结合起来。可以先建立个事件，当回调触发时才运行它。由于每个事件都有其独立的运行环境（execution

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!