Javascript：从HTML中分离元数据的正确方法？

从HTML中分离元数据的正确方法是什么？随着我的项目越来越大，用HTML捆绑元数据变得越来越混乱。有好的选择吗

元数据：JS需要了解的关于HTML元素的所有信息，这些元素不是直接编码在HTML元素及其属性中的。例如，地理定位、启用、禁用操作

---

示例：假设我有一个列表，列出了每当我单击其中一个位置时，我想在地图上显示的位置。如何在JS中识别完全相同的位置，以便告诉地图‘嘿，移动到那个位置’？最简单的方法，最终会变得混乱，就是把它绑定到HTML中，比如说LiID就是地理位置。这很简单，但这是一种代码气味。我怎样才能正确地做到这一点。jQuery中的data（）很快就变得难以维护

---

结论：就是这样，我将为JS找到/编写好的MVC。

取决于元数据的类型。如果它真的属于您的HTML元素，那么这是一个很好的地方。我可以想出几个主意：

只在html元素上放置基本键，并向服务器查询（以JSON格式返回）。这看起来像是糟糕的设计，因为每次客户端需要元数据时，服务器都必须记住/重新组装状态。您可以推送到客户端的状态/工作越多，您的设计就越具有可伸缩性

在一个不可执行的脚本标记中用HTML传回javascript对象（就像客户端模板一样）

---

将其存储在本地存储（HTML 5的客户端数据库）

如果要将元数据附加到DOM元素，请使用HTML5属性或使用jQuery的方法以编程方式执行

这是一个真实世界的例子，我刚刚用过它，真的很有帮助。我向服务器发送了一个上传文件的请求，得到了一个JSON响应，其中包含文件名、内容类型、大小和GUID。在响应中，我想添加一个列表项来显示文件，但我想保留JSON数据。下面是我如何在回调中执行此操作的：

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

这些实现实际上是无限的

---

另外，从jQuery 1.4.3.data（）开始，它将自动提取HTML中的数据属性。因此，可以使用

$（'div'）在代码中立即访问
。数据（'foo'）//bar

请原谅我的无知，但您所说的“元数据”是什么意思？您能举一个您想要的示例吗？理想情况下是前后都有一个标记？你说的是元标记吗？比如描述和作者？我想您首先需要一些服务器端代码，比如PHP。。。单靠HTML是不行的，比如说我有一个我想在地图上显示的地方列表，只要我点击其中一个。如何在JS中识别完全相同的位置，以便告诉地图‘嘿，移动到那个位置’？最简单的方法，最终会变得混乱，就是把它绑定到HTML中，比如说LiID就是地理位置。这很简单，但这是一种代码气味。我该如何正确地做到这一点？即使对于相当大的应用程序，.data（）的东西很快就会变得毛茸茸的，.data（）没有任何可靠的方法来处理所有这些“状态”，你只需要在头脑中记住所有不同的结果。@Radagaisus JavaScript的可伸缩性非常差，无论采用何种解决方案。data（）是自切片面包以来最好的东西。：）我不知道。有时，我会想象一个用JavaScript编写的庞大而宏伟的体系结构。我可以预见它会发生，不幸的是，到目前为止，它从未发生过。

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

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

//etc..