不显眼的 Javascript 混淆了事件处理答案

【问题标题】：Unobtrusive Javascript Obfuscates Event Handling不显眼的 Javascript 混淆了事件处理
【发布时间】：2009-10-06 18:18:14
【问题描述】：

你知道我最喜欢突兀的 javascript 吗？当你触发一个事件时，你总是知道它会做什么。

<a onclick="thisHappens()" />

现在每个人都在喝不显眼的kool-aid，这并不那么明显。对绑定事件的调用可以发生在页面中包含的任意数量的 javascript 文件的任意行上。如果您是唯一的开发人员，或者如果您的团队对绑定事件处理程序有某种约定，例如始终使用某种格式的 CSS 类，这可能不是问题。但在现实世界中，很难理解您的代码。

像 Firebug 之类的 DOM 浏览器似乎可以提供帮助，但是浏览一个元素的所有事件处理程序属性以找到一个执行您正在寻找的代码的属性仍然很耗时。即使这样，它通常也只是告诉你这是一个没有行号的匿名函数（）。

我发现的用于发现触发事件时执行哪些 JS 代码的技术是使用 Safari 的 Profiling 工具，它可以告诉您在特定时间段内执行了哪些 JS，但有时可能是很多 JS狩猎。

必须有一种更快的方法来找出我单击一个元素时发生的情况。有人可以请教我吗？

【问题讨论】：

也会对此非常感兴趣。 :)
我发现了这个问题stackoverflow.com/questions/446892/…

标签： javascript event-handling unobtrusive-javascript

【解决方案1】：

查看Visual Event...这是一个可用于在页面上公开事件的书签。

【讨论】：

【解决方案2】：

如果您使用 jQuery，您可以利用其高级事件系统并检查附加的事件处理程序的函数体：

$('body').click(function(){ alert('test' )})

var foo = $('body').data('events');
// you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it.

$.each( foo.click, function(i,o) {
    alert(i) // guid of the event
    alert(o) // the function definition of the event handler
});

或者您可以实现自己的事件系统。

【讨论】：

【解决方案3】：

要回答您的问题，请尝试使用 Firebug 命令行。这将允许您使用 JavaScript 通过 ID 快速获取元素，然后遍历其侦听器。通常，如果与 console.log 一起使用，您甚至可以获取函数定义。

现在，为不引人注目的人辩护：

我在不显眼的 JavaScript 中发现的好处是，我更容易看到 DOM 的本质。也就是说，我觉得创建匿名函数通常是不好的做法（只有少数例外）。（我发现 JQuery 最大的错误实际上是在他们的文档中。匿名函数可以存在于失败不会导致有用输出的阴暗世界中，但 JQuery 已经使它们成为标准。）我通常有只使用匿名函数的策略如果我需要使用 Prototype 中的 bindAsListener 之类的东西。

此外，如果 JS 文件被正确划分，它们一次只会处理 DOM 的一个子集。我有一个“有序复选框”库，它位于 only 一个 JS 文件中，然后在其他项目中重新使用。我通常还将给定子库的所有方法作为 JSON 对象或类的成员方法，并且每个 js 文件都有一个对象/类（就像我用更正式的语言做所有事情一样）。如果我对我的“表单验证代码”有疑问，我会查看 formvalidation.js 中的 formValidation 对象。

同时，我同意有时事情会以这种方式变得迟钝，尤其是在与他人打交道时。但是杂乱无章的代码就是杂乱无章的代码，除非你自己工作并且是一个优秀的程序员，否则这是无法避免的。

不过，最后我还是宁愿用/* */注释掉两三个js文件中的大部分来查找行为不端的代码，然后遍历HTML并删除onclick属性。

【讨论】：

【解决方案4】：

称它为“kool-aid”似乎不公平。 DOM Level 2 事件解决了内联事件处理的特定问题，例如总是导致的冲突。我不会回头写代码来使用window.onload，它必须检查其他人之前是否分配过它，有时会因为意外或草率而将其覆盖。它还确保更好地分离结构 (HTML) 和行为 (JS) 层。总而言之，这是一件好事。

关于调试，我不认为有任何方法可以解决事件处理程序是匿名函数，除了唠叨作者尽可能使用命名函数。如果可以的话，告诉他们它会产生更有意义的调用堆栈并使代码更易于维护。

【讨论】：

【解决方案5】：

有一件事：您不应该能够通过查看 HTML 代码来了解 JavaScript 中会发生什么。这是什么滋扰？ HTML 用于结构。

如果你想检查哪些事件绑定到某些元素，现在有一个称为视觉事件的书签，firebug 1.6 (IIRC) 将有某种事件检查器。

【讨论】：