Question

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

元数据：JS需要知道的关于HTML元素及其属性中没有直接编码的HTML元素的所有内容。例如。地理定位，启用，禁用操作。

示例：假设每当我点击其中一个地图时，我都会有一个我希望在地图上显示的地点列表。我如何识别JS中完全相同的位置，以便我可以告诉地图'嘿，移动到那个位置'？最简单的方法，最终变得混乱，是将它绑定到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..

实施真的是无限的。

ALSO，从jQuery 1.4.3 .data（）开始，将自动获取HTML中的数据属性。因此，可以使用<div data-foo="bar"></div>

立即在代码中访问$('div').data('foo') //bar

Answer 2

取决于什么样的元数据。如果它真的属于您的HTML元素，那么它就是一个好地方。我能想到一些想法：

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

使用HTML在非可执行脚本标记中传回javascript对象（就像用于客户端模板一样）。

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

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

2 个答案: