如何编写易于调试/维护的JavaScript事件处理程序

Question

事件处理程序主要有两种编写方式：

<input type="button" onclick="clickFunction()" />

或者

 $('#btnID).click( function(){ .. });

有人需要在后期调试/维护这段代码。在第一种情况下，我们可以使用“检查元素”功能快速找到执行的内容。在第二种情况下，我们需要找到正确的文档加载器代码以找到它的位置。

那么，推荐的方法是什么？

- srini.venigalla

Answer 1

推荐的方法是编写事件处理程序（第二个选项）。想了解其背后的原因，请查看这篇优秀文章中的“2.不要编写内联Javascript”。

此外，如果您想编写更易于调试的代码，请考虑为回调函数命名。这样，它们将以函数名称而非“未定义”显示在js错误中。

$('#btnID).click( function someEvent(){ .. });

- Kostia

---

如果它执行不同的操作，并具有单独的回调函数，则应该具有不同的ID。为什么要在执行不同操作的按钮上使用相同的ID呢？ - Kostia

@Kostia 在表单上使用类似 btnSubmit 的内容作为提交按钮并不罕见。这是在许多页面上可能发生的情况。@srini.venigalla 在这种情况下，您需要将脚本分隔成单独的文件。您可以将通用功能放在一个脚本中，多个页面可以使用该脚本，并且每个页面都有自己的特定于页面的脚本，只包含在相关页面中。 - Shmiddty

您可以在调试器堆栈跟踪中看到它们的名称。 - pqnet

@Shmiddty 我必须不同意。仅仅因为它很常见并不意味着它是最佳实践；尽管我理解有特殊情况。 - Kostia

@srini.venigalla 我很熟悉...但我认为解决方案是针对不同功能使用单独的部分（然后相应地重新命名ID）。如果功能类似，但不完全相同，我倾向于使用相同的回调函数（这样更加DRY），并根据上下文进行某种形式的分离。 - Kostia

Answer 2

第二种方法是首选方法。原因有几个：

首先，它将演示与逻辑分开。您不希望将演示（HTML）与逻辑混在一起，因为这样会变得难以维护。我喜欢有一个单独的JavaScript区域专门用于“绑定”，这样我就可以轻松地看到我的JavaScript逻辑如何钩入我的HTML。但重要的是要将此保持在HTML本身之外。

其次，它可以防止代码重复。内联方法通常会导致像这样的代码：

[ <a href="javascript:void(0)" onclick="closeWindow()">X</a> ]
...
<button onclick="closeWindow()">Close Window</button>

问题在于您最终会有许多不同的元素引用单个函数或方法。如果该函数或方法发生任何变化，您将需要搜寻所有引用。这违反了基本的反代码重复措施。最好做类似于这样的事情。

[ <a href="javascript:void(0)" class="closeWin">X</a> ]
...
<button class="closeWin">Close Window</button>
...
<script type="text/javascript">
    $(function() {
        $(".closeWin").on("click", closeWindow);
    });
</script>

第三，它允许某些用户操作的单一阻塞点，您可以添加断点以进行调试。当然，您可以在被调用的任何函数内部执行此操作，但是拥有专用的绑定区域似乎可以加快速度。

第四，它允许多个绑定。例如，您可能有三个按钮，前两个执行一个操作，后两个执行另一个操作（因此第二个按钮执行两个操作）。您可以开始在onclick中添加多行JavaScript，如下所示：

<button onclick="one();">One</button>
<button onclick="one();two();">Two</button>
<button onclick="two();">Three</button>

这看起来和它一样丑陋。您也可以使用一些笨拙的中间方法，例如：

<button onclick="one();">One</button>
<button onclick="oneAndTwo();">Two</button>
<button onclick="two();">Three</button>

这也非常丑陋，将成为维护的噩梦。或者您可以进行一些简单的绑定：

<button class="actionOne">One</button>
<button class="actionOne actionTwo">Two</button>
<button class="actionTwo">Three</button>
...
<script type="text/javascript">
    $(function() {
        $(".actionOne").on("click", one);
        $(".actionTwo").on("click", two);
    });
</script>

更加清晰和易于维护。

现在，关于您如何确定已附加哪些事件处理程序的问题，我没有完美的答案，但我有一个相当不错的答案：获取Google Chrome（这也可能适用于Safari）。当您在Google Chrome中检查元素时，它将为您提供附加到该元素的事件处理程序列表。

如果您遵循我的建议，在JavaScript中添加一个“bindings”部分，那么缩小绑定的范围就相当容易了。但是使用Chrome会更快捷、更轻松。您可以按照自己的理解编写代码。虽然通常认为远程绑定优于内联绑定。如何进一步处理取决于您自己的经验和编程风格。

- Pete

Answer 3

除了以上所有出色的答案，我发现了一个叫做Visual Event的工具，它可以为事件处理程序提供很多可见性。

http://www.sprymedia.co.uk/article/Visual+Event

- srini.venigalla