Javascript 最佳实践 - onclick vs unobtrusive

Question

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

<ul>
    <li class="listeelement" id="load-content-id-1"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-2"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-3"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-4"><div>listcontent</div></li>
  </ul>

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

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

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

如果有人可以对此发表意见，我会很高兴。

Answer 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属性，因为这将选项限制为最多一个处理程序。

Answer 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