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

回答

相關問題