Javascript：将元数据与 HTML 分开的正确方法？

发布于 2024-11-11 17:59:04 字数 419 浏览 2 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千柳 2024-11-18 17:59:04

如果要将元数据附加到 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 中的 data- 属性。因此，可以使用 $('div').data('foo') // 在代码中立即访问

栏

If you want to attach metadata to DOM elements then use HTML5 data- attributes or use jQuery's .data() method to do it programmatically.

Here's a real world example I just used it on that really helped. I sent a request to the server to upload a file and I get a JSON response with the File Name, Content Type, Size and a GUID. On the response I want to add a list item to show the file but I want to preserve the JSON data. Here's how I did it in the callback:

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

What's great about this is now the list item HAS all my metadata attached to it.

So I could do something like this and know everything about it:

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

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

//etc..

The implementations are really limitless.

ALSO, as of jQuery 1.4.3 .data() will automatically pick up the data- attributes in your HTML. So <div data-foo="bar"></div> can be immediately accessed in code using $('div').data('foo') //bar

回复收藏 0 原文