为什么Stackoverflow使用javascript动态绑定用户操作？

Question

检查我看到的问题的HTML来源：

<a id="comments-link-xxxxx" class="comments-link">add comment</a><noscript>&nbsp;JavaScript is needed to access comments.</noscript>

然后在javascript源代码中：

// Setup our click events..
$().ready(function() {    
        $("a[id^='comments-link-']").click(function() { comments.show($(this).attr("id").substr("comments-link-".length)); });    
});

似乎所有用户点击事件都以这种方式绑定。

这种方法的缺点对于没有javascript浏览网站的人来说是显而易见的，但是，javascript动态添加事件而不是直接声明它们有什么好处？

Answer 1

• 您不必在HTML中反复键入相同的字符串（如果没有其他任何内容会增加调试的拼写错误数量）
• 您可以将HTML / CSS移交给不需要任何JavaScript技能的设计师
• 您可以通过编程控制调用哪些回调以及
• 它更优雅，因为它符合布局和行为之间的概念分离
• 修改和重构更容易

最后一点，想象一下，如果您想在模板中的其他位置添加“显示评论”图标。将相同的回调绑定到图标上非常容易。

Answer 2

通过事件API而不是标记来附加事件是不引人注目的javascript的核心。欢迎阅读this wikipedia article，以全面了解为什么不引人注目的javascripting很重要。

与将标记与标记分开的方式相同，您希望将标记与标记分开，包括事件。

Answer 3

我认为这是良好软件开发的基本原则之一：

表达与逻辑的分离。

HTML / CSS本质上是一种表示语言。 Javascript用于创建逻辑。如果可能的话，将任何逻辑与演示文稿分开是一种很好的做法。

Answer 4

通过这种方式，您可以拥有一个轻量级页面，您可以通过javascript处理所有操作。不必使用嵌入到页面中的不同URL和动作的负载，只需编写一个查找链接的javascript函数，并将其挂钩，无论您在页面的哪个位置转储“评论”链接。 这样可以节省重复html的加载：）

Answer 5

我看到的唯一优势是缩小了页面大小，因此需要更低的带宽。

编辑：当我被投票时，让我们解释一下我的答案。

我的观点是，使用链接作为空锚只是一种不好的做法，没有别的！当然，从HTML中分离JavaScript 逻辑非常棒。当然，重构和调试更容易。但在这里，它违背了不引人注目的JavaScript的主要原则： Gracefull降级！

一个好的解决方案是必须可能调用注释：一个通过REAL链接指向显示注释的简单页面，另一个只返回注释（以JSON表示法或类似格式）与通过AJAX调用直接注入主页面的目的。

这样做，使用AJAX方法的方法也应该注意取消另一个调用，以避免用户被重定向到简单页面。那将是Unobtrusive JavaScript。这里只是JavaScript放在一个误用的锚标签上。