Javascript最佳实践 - onclick vs unobstrusive

在我们的项目中，目前我有以下问题。我有一些点击绑定到锁定像元素列表如下：Javascript最佳实践 - onclick vs unobstrusive

 
    <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的点击要发送一个请求与像元-id和类似的东西具体PARAMS特定操作（ - > module/action？id = 1 & something = something）。

我想写一个通用的请求类，它发送请求并处理所有事情，这与点击和请求有关，我不确定这是否是一种很好的方式来将点击无影响的类绑定到类.listelement并在我的标记中的某处保存动作和参数信息，或者如果通过onclick =“sendRequest（action，params）”绑定点击更好。

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

如果有人可以给出意见，会很高兴。谢谢。

来源

2010-07-13 snirgel

我会建议使用体面的标记，而不是依靠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属性，因为这会将选项限制为一个处理程序最大值。

来源

2010-07-13 09:53:15 Anurag

我喜欢这个HTML5解决方案。但目前我们使用xhtml，因为我们必须支持ie7等所有浏览器！所以我需要一个解决方案，我可以在'old-school'-way :)中使用。 – snirgel 2010-07-13 10:00:57

我认为你仍然可以使用数据属性，希望:)请参阅http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6和http：// wiki .whatwg.org/wiki/HTML_vs._XHTML＃Syntax_and_Parsing – Anurag 2010-07-13 10:15:15

非常感谢。与我的首席技术官讨论，我们同意，这是一个很好的解决方案，但是有可能，element.dataset目前在例如Firefox（在Ubuntu上用版本3.6.3试用过）。此时，您的数据属性解析解决方案对于我们的需求听起来有些静态，因为您一般都知道，标记中设置了哪些数据属性，因为您无法获取整个数据集。顺便说一句：有没有人/你试试这个：http://www.orangesoda.net/jquery.dataset.html？听起来，这将解决我的问题？！ – snirgel 2010-07-13 12:05:28

这是一个选项。改为使用li的链接<a>，并将控制器/操作作为查询字符串（或者如果您的后端可以解析相当的URL，则使用斜杠分隔的键值对）。假设你正在做一个AJAX调用，有一些简单的JavaScript，在页面加载时，将所有<a>元素的click事件挂钩给给定类（可以选择适当的东西，比如.ajax-link）。在处理程序中，防止默认操作，以便浏览器不导航到href，并采用href，解析它，然后配置xhr，然后离开。不知道你是否使用像jQuery这样的库，但这会减轻负载和代码的交易。

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

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

来源

2012-05-17 18:59:51 jinglesthula

Javascript最佳实践 - onclick vs unobstrusive

回答

相关问题