與HTMLElement對象進行數據關聯的最佳做法？

我遇到了3種方法來存儲HTMLElement對象的任何數據。與HTMLElement對象進行數據關聯的最佳做法？

有人可以請建議將任何數據與元素對象關聯的最佳做法嗎？

我更喜歡3號，因爲它沒有像1和2那樣設置任何HTML屬性。這就像設置和獲取對象的任何屬性。

使用的setAttribute（「nonStandardDataProperty」），用於數據xattribute HTMLElement的對象例如dataset.x的
使用的數據集屬性
HTMLElement的是對象，所以定義任何屬性，並將其將作爲數據存儲對於那個元素

來源

2013-04-02 P K

不是1和3相同？ – NilsH

選項3僅在您獲取對象引用後纔是對象，這會消除從服務器獲取關聯數據。 – Valentin

@NilsH：不，只在已經過時的IE中。閱讀[prop vs attr]（http://stackoverflow.com/q/5874652/1048572） – Bergi

在我看來，選項＃2是最符合標準的，如果這就是你想要的;此外，它還允許您在保持有效標記的同時從HTML中設置這些屬性。這通常是我的首選，但在你的情況下，它確實適合你。

來源

2013-04-02 14:14:01 Adrian

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

來源

2013-04-02 13:59:03

是的，很好：http://perfectionkills.com/whats-wrong-with-extending -dom/ –

@FelixKling很好的鏈接！ – Alnitak

@FelixKling很好的理由，但很遺憾，我們不允許使用原型繼承，這是JavaScript的真正威力。 –

-1

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>

來源

2013-04-02 14:07:50 lngs

雖然此鏈接可能回答此問題，但最好在此處包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – Mxyk

感謝您的諮詢。我確定了我的答案。 – lngs

我的html代碼片段中沒有看到任何非標準的屬性名稱。 – Bergi

我會用選項＃1，因爲它是最便攜。

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

來源

2013-04-02 14:12:04 Alnitak

雖然這隻適用於可序列化的數據，對吧？ –

@FelixKling如果你使用'.data'來寫數據，那麼不會有我的經驗。這將數據存儲爲屬性而不是屬性。 – Alnitak

@Alnitak：jQuery的'.date（）'方法不使用HTML [dataset]（https://developer.mozilla.org/en-US/docs/DOM/element.dataset），在這裏你只能存儲字符串就像在數據屬性中一樣）。 – Bergi

我想最好的方法是使用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');

這也將更新數據 - *屬性在這種情況下

來源

2013-04-02 14:16:36 Torben

方案4：存儲上的DOMNode的標識符，你可以用它來尋找東西在分離的地圖（是的，這是jQuery的是怎麼做的 - 當然，在初始化期間，在導入所有data- *屬性的基礎上）。

如果您介意自己的房產名稱，那麼和＃3一起使用會很好。＃2應該只允許Integer和String值，＃1可能有同樣的問題。

我用4號去的，只是因爲我不喜歡新的規範雨後春筍般冒出來，並聲稱我用我自己的數據屬性名稱的可能性...

來源

2013-04-02 14:18:49 rodneyrehm

謝謝。您能否詳細說明一下「在獨立地圖中查找東西」？ –

請注意，這可能會產生垃圾回收問題。 – Bergi

與HTMLElement對象進行數據關聯的最佳做法？

回答

相關問題