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中分离元数据的正确方法？

回答

相关问题