使用數據屬性來編輯javascript內容有什麼缺點嗎？

我正在開發一個簡單的網絡應用程序，我需要在某些事件或條件後更新顯示的數據。這些數據分散在許多不同的地方，並在完全獨立的標記結構中。我曾經使用過類，但是在使用類來編輯數據時發現了一些危險的情況（特別是當我們使用OOCSS時，並且有很多類我們想要改變，並且不應該被綁定到js數據或行爲）。下面的解決方案在這方面應該是無懈可擊的，但是因爲我以前從來沒有見過它被使用過，所以我擔心我可能會錯過一些東西。像下面這樣的解決方案有什麼缺點嗎？使用數據屬性來編輯javascript內容有什麼缺點嗎？

實施例下面的代碼 - 使用jQuery

後續可被綁定到特定的數據改變事件：

$('.data[data-type=user_data]').each(function(){ 
    $(this).find('.data[data-type=user_name]').html($.user.userName) 
    .end().find('.data[data-type=user_location]').html($.user.userLocation) 
    .end().find('.data[data-type=incident_date]').html($.user.incidentDate) 
    .end().find('.data[data-type=incident_cost]').html($.user.incidentCost) 
    .end().find('.data[data-type=user_hair_color]').html($.user.hairColor); 

     //more data will be added here ...

}）;

標記將是在一些地方：

<div class="data incident_result bubbled_box" data-type="user_data"> 
<h3>Some heading</h3> 
<ul> 
    <li>Username:  <span class="data highlight name" data-type="user_name">Igor Wassel</span></li> 
    <li>User location: <span class="data" data-type="user_location">Estonia</span></li> 
    <li>Provider:  <span class="data" data-type="incident_date">21/08/11</span></li> 
</ul>

其它地方的標記將包括其他數據，但一個完全不同的HTML結構內。

來源

2011-09-30 user972848

使用數據屬性編輯與 javascript的內容有什麼缺點嗎？

不，除非您寫入這些屬性並使用JavaScript讀取它們。不幸的是，太多人會這樣做。 DOM不是存儲JavaScript狀態的地方。

否則，通過data-attributes可以將數據從服務器發送到客戶端。要保持完全故障安全，請在您的所有data屬性上附加一些通用前綴。

只有我懷疑它的性能選擇元素的屬性值。諸如getElementsByName等方法針對該任務進行了優化。

人們至少可以擴展內部jQuery find循環遍歷所有元素並自動檢索它們的值。

$('.data[data-type=user_data] *').each(function (el) { 
    el = $(el); 
    type = el.data('type'); 
    if (type) { 
     el.html($.user[type.toCamelCase()]); 
    } 
}); 

String.prototype.toCamelCase = function() { /* implement me */ };

並且不要忘記HTML5文檔類型聲明。

來源

2011-09-30 10:54:02 katspaugh

使用數據屬性來編輯javascript內容有什麼缺點嗎？

回答

相關問題