Javascript 最佳实践 - onclick vs unobtrusive答案

【问题标题】：Javascript best practice - onclick vs unobstrusiveJavascript 最佳实践 - onclick vs unobtrusive
【发布时间】：2011-03-15 05:41:47
【问题描述】：

在我们目前的项目中，我遇到了以下问题。我必须将一些点击绑定到锁定元素列表，如下所示：

listcontent
listcontent
listcontent
listcontent

点击.listelement 应该向具有特定参数的特定操作发送请求，例如 element-id 和类似的东西 (-> module/action?id=1&something=something)。

我想编写一个通用请求类来发送请求并处理所有与点击和请求有关的事情，我不确定这是否是将点击不显眼地绑定到类的好方法.listelement 并将操作和参数信息保存在我的标记中的某处，或者如果通过onclick="sendRequest(action, params)" 绑定点击会更好。

obtrusive-onclick-solution 在我看来要容易得多，但我不确定它是否也是一个好的解决方案。

如果有人对此发表意见会很高兴。

【问题讨论】：

标签： javascript dom-events unobtrusive-javascript

【解决方案1】：

我建议使用适当的标记，而不是依赖onclick 属性。最大的原因是它可以让你的标记保持干净，如果你有很多这些元素，它还可以大大减少网络上的字节大小。

另外，我不会在 id 属性中编码值，因为您现在可以合法地使用 HTML5 数据属性，并且它们也向后兼容。

<ul id="container">
    <li class=".." data-action="login" data-id="1" data-params="a=b">..</li>
    <li class=".." data-action="logout" data-id="2" data-params="c=d">..</li>
    ...
</ul>

在标记中获得数据后，设置点击处理程序并将其与Request 类连接起来相当简单。

var list = document.getElementById("container");
var items = list.getElementsByTagName("li");

for(var i = 0; i < items.length; i++) {
    items[i].onclick = (function(element) {
        return function() {
            var action = element.getAttribute('data-action');
            var id = element.getAttribute('data-id');
            var params = element.getAttribute('data-params');

            sendRequest(action, params);
        };
    })(items[i]);
}

如果您有很多个 <li> 元素，那么事件委托可能是一种更好的方法，而不是为每个元素添加一个处理程序。此外，请考虑使用 DOM 事件注册模型来添加处理程序，而不是 onclick 属性，因为这会将选项限制为最多一个处理程序。

【讨论】：

我喜欢这个 HTML5 解决方案。但是目前我们使用的是xhtml，因为我们要支持ie7等所有浏览器！所以我需要一个可以以“老派”方式使用的解决方案:)。
我认为你仍然可以使用数据属性，希望 :) 见 stackoverflow.com/questions/2412947/… 和 wiki.whatwg.org/wiki/HTML_vs._XHTML#Syntax_and_Parsing
非常感谢。与我的 CTO 讨论过，我们同意，这将是一个很好的解决方案，但是否有可能 element.dataset 目前在例如Firefox（在 ubuntu 上试用了 3.6.3 版）。此时，您的解析数据属性解决方案对于我们的需求来说听起来有点静态，因为您通常必须知道标签中设置了哪些数据属性，因为您无法获得整个数据集。顺便说一句：有没有人/你试过这个：orangesoda.net/jquery.dataset.html？听起来，这能解决我的问题吗？！

【解决方案2】：

这是一个选项。改为使用 li 的链接 <a> 并将控制器/操作作为查询字符串（如果您的后端可以解析漂亮的 URL，则使用斜线分隔键值对）。假设您正在执行 AJAX 调用，请使用一些简单的 javascript 在页面加载时挂钩带有给定类的所有 <a> 元素的单击事件（您可以选择适当的内容，例如 .ajax-link）。在处理程序中，阻止默认操作，这样浏览器就不会导航到 href，然后提取 href，解析它，并用它配置一个 xhr，然后就可以走了。不确定你是否在使用像 jQuery 这样的库，但这会减轻负载并且代码很划算。

如果需要，您可以将<a> 嵌套在现有的<li> 中。

这可能会有所帮助：JQuery parameter injection on bind/click vs. embedded click handlers with parameters

【讨论】：