javascript - 在命名空间对象或闭包中将事件处理程序代码保存在哪里？

Question

在过去的几年里，我一直使用 YUI 所支持的 JavaScript 命名空间作为格式化 JavaScript 代码的默认方式。

总而言之，它在更复杂的环境中运行良好，在这些环境中，许多 Web 小部件可能在不同的时间粘在一起。

直到最近，我几乎总是通过从 namespace 对象本身调用处理程序来在 HTML 中使用添加的事件处理程序。

我最近一直在使用 JQuery，并且一直在 Ready 函数内部而不是 HTML 中设置处理程序。

随着我做的越来越多，JQuery 就绪函数的闭包似乎正在取代 namespace 对象。

我现在最终得到的(至少对于一个小部件/工具类型页面)是一个 namespace 对象，主要处理保存数据和一堆关闭的事件处理程序，我出于数据特定目的访问 namespace 对象。

我的问题是，处理闭包与 namespace 对象的最佳实践是什么，特别是与事件处理程序相关的？

或者，类似地，设置事件处理程序的最佳实践是什么，它们应该是“重量级”并自行处理处理，还是交给更多类似库的代码。

就个人而言，跟踪许多单独的“重量级”事件处理程序的流程比较困难。

Answer 1

这是一个非常主观的问题。话虽这么说，我会尽力给出我认为每种方法的优缺点。

命名空间对象:

yourNamespace.events.someClickHandler = function(event) {...}
$(function() {
  $("#someElement").click(yourNamespace.events.someClickHandler);
}

这种方法的第一个“缺点”是将事件处理程序与其连接分开。您可以通过在定义每个事件后连接每个事件来避免这种情况(就像我在上面的示例中所做的那样)，但最终您的代码中会出现大量“$(function() {”行。

这种风格的另一个“缺点”是事件处理程序的长名称(例如“yourNamespace.events.someClickHandler”)。您可以使用别名:

var events = yourNamespace.events;
$("#someElement").click(events.someClickHandler);

和更短的命名空间名称可以在一定程度上缓解这个问题，但实际上没有办法解决它。

既然有这些缺点，为什么有人会使用命名空间模式呢？嗯，它的一个“优点”是这些事件是可以访问的。假设(出于调试目的)您想要记录传递给单击处理程序的事件对象。使用 Firebug 你可以做类似的事情:

var oldHandler = yourNamespace.events.someClickHandler;
var newHandler = function(e) {console.log(e); oldHandler(e);}
$("#someElement").unbind("click");
$("#someElement").click(yourNamespace.events.someClickHandler);

而且，甚至无需刷新页面，您就可以记录您的事件。

同样，这种风格还有一个可重用性的优点。如果您想创建一个与旧的类似的新点击处理程序，但也执行 x、y 和 z，您可以这样做:

yourNamespace.events.advancedClickHandler = function(event) {
  yourNamespace.events.someClickHandler(e);
  x(); y(); z();
}

现在相比之下，我们有“闭包”样式(我更愿意将其称为“匿名函数”样式)。

$(function() {
  $("#someElement").click(function(event) {...});
}

这显然更简洁，处理程序的定义与连接尽可能接近，而且我认为它甚至使用了很少的内存，因为没有变量引用。但是，您将无法进行任何实时调试，您将无法将该处理程序连接到其他任何地方，或者在某个新处理程序中扩展它，或者类似的事情，因为您的处理程序仅暂时存在当你连接它时。

所以，希望这会有所帮助。根据我的经验，命名空间对象样式通常是首选方法，尤其是 JS 项目越核心/严肃。但它肯定有一些缺点；目前确实没有完美的(即完全干净/可重用的)方式来连接 JS 中的事件。