與HTMLElement對象進行數據關聯的最佳實踐？

Question

我遇到了三種使用HTMLElement對象存儲任何數據的方法。

有人可以建議將任何數據與元素對象相關聯的最佳實踐嗎？

我更喜歡數字3，因為它沒有像1和2那樣設置任何HTML屬性。這就像在對象上設置和獲取任何屬性一樣。

1. 使用setAttribute（'nonStandardDataProperty'）
2. 使用HTMLElement對象的dataset屬性，例如dataset.x，用於data-xattribute
3. HTMLElement是對象，因此定義任何屬性，它將作為該元素的數據存儲

Answer 1

選項＃2在我看來是最符合標准的，如果那就是你要找的東西; 此外，它允許您在HTML中設置這些屬性，同時仍保持有效標記。 這通常是我的偏好，但在你的情況下，它真的是最適合你的：如果它有效，那就去吧。

Answer 2

我會使用選項＃1，因為它是最便攜的。

但是我會使用HTML5的data-前綴來獲取這些自定義屬性，以便與jQuery的.data()方法兼容。

Answer 3

第三種選擇是將數據存儲在DOM中，如果數據不是很大，這可能不是一個壞主意。如果是，那么存儲和檢索數據可能會影響應用程序的性能。

Answer 4

我想最好的方法是使用HTML5 data- * Attributes和jQuery的.data（）函數。 它可能是將數據存儲在內置HTML元素中並將來更新到最新技術的最佳方式，因此您可以向后傾斜並提高工作效率

<div id="myDiv" data-my-var="my-var-value"></div>

可以像這樣用在JavaScript中:(需要jQuery）

console.log( $( '#myDiv' ).data( 'my-var' ) )

編輯：並設置如下

$( '#myDiv' ).data( 'my-var', 'my-new-var-value' );

在這種情況下，它還將更新data- *屬性

Answer 5

選項4：在DOMNode上存儲一個標識符，您可以使用該標識符在分離的映射中查找內容（是的，這是jQuery的工作方式 - 當然，除了在init期間導入所有data- *屬性）。

如果你介意你的屬性名稱，那么＃3就可以了。 ＃2應該只允許Integer和String值，＃1可能有同樣的問題。

我會選擇＃4，因為我不喜歡彈出新規格的可能性並聲稱我用於我自己的數據的屬性名稱...

Answer 6

Twitter Bootstrap使用選項一。

看一下Twitter Bootstrap文檔，您將看到在非標准屬性html元素中存儲數據的大量用法。

例

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>


<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>