Javascript：從HTML中分離元數據的正確方法？

什麼是從HTML中分離我的元數據的正確方法？隨着我的項目越來越大，HTML越來越混亂，元數據越來越混亂。任何好的選擇？Javascript：從HTML中分離元數據的正確方法？

元數據：JS需要知道的關於HTML元素的一切，這些元素不是直接在HTML元素及其屬性中編碼的。例如。地理位置，啓用，禁用操作。

例如：假設我有一張我想在地圖上顯示的地方列表，只要點擊其中一個地圖即可。我如何識別JS中完全相同的地方，以便我可以告訴地圖'嘿，移動到那個位置'？最簡單的方法最終會變得混亂，就是將其綁定到HTML中，並說li ID將是地理位置。這很容易，但它是一種代碼味道。我如何正確地做到這一點？ jQuery中的.data（）也很快就會變得很糟糕。

結論：就是這樣，我要爲JS找到/寫好MVC。

來源

2011-06-01 CamelCamelCamel

請原諒我的無知，但是您的意思是'metadata'是什麼意思？ – stefgosselin 2011-06-01 19:32:35

你能舉一個你想要的例子嗎？理想地與之前和之後？ – 2011-06-01 19:33:57

你談論元標籤？像描述和作者？我想你會首先需要一些服務器端的代碼，如PHP ...單獨的HTML不會這樣做。 – ecchymose 2011-06-01 19:36:58

如果你想將元數據附加到DOM元素，然後使用HTML5 data-屬性或使用jQuery的.data()方法以編程方式做到這一點。

下面是我真正使用過的真實世界示例，這真的有所幫助。我發送了一個請求到服務器上傳一個文件，我得到了一個帶有文件名，內容類型，大小和GUID的JSON響應。在響應我想添加一個列表項來顯示文件，但我想保留JSON數據。以下是我做到了在回調：

function(response) { 
    $('<li>').text(response.fileName).data('metadata', response).appendTo('ul'); 
}

有什麼了不起，這是現在的列表項附加了我所有的元數據。

所以，我可以做這樣的事情，知道關於它的一切：

var metadata = $('ul li:eq(1)').data('metadata'); 

alert(metadata.contentType); 
alert(metadata.size); 

//etc..

的實現是真正無限的。

ALSO，從jQuery 1.4.3開始.data（）將自動獲取HTML中的數據屬性。因此<div data-foo="bar"></div>可以立即通過代碼使用$('div').data('foo') //bar

來源

2011-06-01 19:36:55

即使使用.data（），對於相當大的應用程序，東西也會變得非常快速.data（）沒有任何可靠的方法來處理所有這些'狀態'，您只需要記住頭部中的所有不同結果。 – CamelCamelCamel 2011-06-01 19:40:52

這裏有：http://plugins.jquery.com/project/metadata – CamelCamelCamel 2011-06-01 19:42:17

@Radagaisus無論什麼解決方案，JavaScript的可伸縮性都很差。 .data（）是從切片面包以來最好的東西。 :) – 2011-06-01 19:45:10

取決於什麼樣的元數據。如果它真的屬於你的HTML元素，那是一個很好的地方。有幾個想法我可以想到：

只把基本鍵放在你的html元素上，並查詢它的服務器（以JSON格式返回它）。這似乎是糟糕的設計，因爲服務器每次客戶端需要元數據時都必須記住/重新組裝狀態。您可以推送給客戶的狀態/工作越多，設計的可擴展性就越高。

在不可執行的腳本標記（如您將用於客戶端模板）中將JavaScript對象與您的HTML一起傳回。

儲存於本地存儲（對於HTML 5客戶端數據庫）

來源

2011-06-01 19:35:22 Milimetric

Javascript：從HTML中分離元數據的正確方法？

回答

相關問題