Javascript:将元数据与HTML分离的正确方法

Javascript: Proper way to separate metadata from HTML?

本文关键字：方法 分离 HTML 元数据 Javascript      更新时间：2023-09-26

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

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

例如：假设我有一个列表，每当我点击其中一个时，我都想在地图上显示这些地方。我如何在JS中识别完全相同的位置，以便告诉地图"嘿，移动到那个位置"？最简单的方法是将其绑定到HTML中，比如说li-id将是地理位置。这很容易，但这是一种代码气味。我该如何正确地做到这一点。jQuery中的data（）也变得很难维护。

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

如果要将元数据附加到DOM元素，请使用HTML5数据属性或使用jQuery的.data（）方法以编程方式实现。

这是一个现实世界中的例子，我刚刚用过它，真的很有帮助。我向服务器发送了一个上传文件的请求，得到了一个JSON响应，其中包含文件名、内容类型、大小和GUID。在响应中，我想添加一个列表项来显示文件，但我想保留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 data-foo="bar"></div>

取决于元数据的类型。如果它真的属于你的HTML元素，那是一个很好的地方

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

在不可执行的脚本标记中，将javascript对象与HTML一起传递回来（就像客户端模板一样）。

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

相关文章：