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

Question

从 HTML 中分离元数据的正确方法是什么？随着我的项目越来越大，将元数据与 HTML 捆绑在一起变得越来越困惑。有什么好的选择吗？

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

示例:假设我有一个地点列表，每当我点击其中一个地点时，我都希望在 map 上显示这些地点。我如何在 JS 中识别完全相同的位置，以便我可以告诉 map “嘿，移动到那个位置”？最简单的方法(最终会变得困惑)是将其绑定(bind)到 HTML 中，假设 li id 将是地理位置。这很简单，但它是一种代码味道。我该如何正确地做到这一点？ jQuery 中的 .data() 也很快变得难以维护。

结论:就是这样，我要为 JS 寻找/编写好的 MVC。

Answer 1

如果您想将元数据附加到 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..

实现真的是无限的。

另外，从 jQuery 1.4.3 开始，.data() 将自动获取 HTML 中的数据属性。所以<div data-foo="bar"></div>可以使用 $('div').data('foo') //bar 在代码中立即访问