将系统值传递给 JavaScript 的最佳方式

Question

将对象和类别 ID 或其他不应呈现给用户的系统变量从服务器传递到浏览器的最有效方法是什么？

假设我有一个项目列表，我可以通过 javascript 对每个项目执行某些操作，例如显示工具提示 html 或通过 ajax 添加到收藏夹，或显示在地图上。工具提示 html、数据库 ID 或地理位置最好保存在哪里？

我能想到的一些选项是：

• 每个项目的 标签内的一些字典、
• 微格式、
• 内联 xml、
• rel 属性、
• css 类名称具有特定信息，例如 class="lat-12345 uid-45678"，
• 一个 带有 html id 字典与系统映射字典模板中的值，
• 从数据库生成的 javascript，并通过 包含在 html id 字典中，映射字典与系统值模板，
• 当我需要更多信息而不仅仅是 id 时，ajax 请求所有情况，
• 在 html 标签内带有参数的事件处理程序，例如 onmouseover="tooltip(this, 123, 'Hello world!')"。

PS 我更喜欢不引人注目的解决方案，而且加载/执行时间也很重要。

Answer 1

也许我错过了一些东西......为什么不只是 JSON？

如何“发送”它（无论是在初始页面加载为“javascript”还是通过 AJAX 或其他方式）实际上只是一个微不足道的细节，主要取决于数据何时可用。 （JSON 是合法 JavaScript 语法的子集。）

那么这只是正确转换的问题。当然，通过将其推送到 JSON/JS，您可能会导致某些非 JS 客户端不可互操作（如果您考虑到这一点）。如果情况确实如此，为什么不直接使用您放在顶部的任意数量的技术来执行服务器端转换呢？

您还可以在 HTML 中使用任意属性（HTML5 规范可能包括正式合法化的“data-*”）——虽然技术上不“正确”，但所有主要 Web 浏览器都将接受可通过 DOM API 访问的未知属性。

Answer 2

我更喜欢一个 AJAX 调用来获取您一开始就需要的任何数据，这样您就可以在脚本中使用一个简单的 JSON 对象。当然，如果您发现需要更多信息，可以通过额外的电话进行补充。

如果这不切实际，那么在 标记中“硬编码”JavaScript 对象是下一个最佳选择。当然，“硬编码”是从浏览器的角度来看的。实际内容肯定是由数据库中的服务器端脚本编写的。

Answer 3

您可以使用的一种方法是自定义属性。我认为您将其称为微格式，但我不完全确定它们是否是同一件事，所以我在下面写了一个描述。

之前遇到过同样的问题，我基本上使用如下内容：

<div data-pid="1234">
    <a href="#" class="add-to-favourites">
        <img src="addToFavourites.png" />
    </a>
</div>

$("a.add-to-favourites").click(function() {
    $.load("/Favourites/Add.php?prodID="+$(this).parent().attr("data-pid"));
});

这应该完全符合你想要做的。我将 pid 放在 div 中而不是 a 标记中的原因是，您可以将所有其他产品信息放入div 以及用户可以执行的其他操作，例如使用 data-description 在鼠标悬停时显示工具提示，或使用 data-geo-x< 在地图上显示/code> 和 data-geo-y。当然，您可以将它们命名为任何您想要的名称。

支持/接受

这正在成为一种完全被接受的做你想做的事情的方式。 HTML 5 支持这一点，这正是您想要实现的目标。

所以 HTML 5 支持它，但是 HTML 4 呢？

它可能会使 HTML 4 失效，但世界正在朝着更大、更好的方向发展。较旧的浏览器（IE6 及更早版本、FF1 / 2、Opera 7 / 8 / 9）变得越来越不常见，因此这不应该成为问题。它实际上不会破坏旧版浏览器 - 该功能仍然有效。

重要有效性说明

确保将 data- 添加到属性名称前。这将使该属性在 HTML 5 中完全有效。

一些额外的提示

在 jQuery 1.5 中，我听到了 我的问题，您只需指定 attr("pid") 返回data-pid 的值。如果是这种情况，那么在实际属性名称之后命名属性名称的第二部分时我会小心（例如，使用 data-pid 而不是 data-id） - 特别是如果指定了 id 属性，我不确定如果不这样做会产生什么影响，但最好首先避免这个问题。因此，该网站稍后会出现问题。

希望这就是您所寻找的。

Answer 4

ASP.NET 提供了一种非常方便的方法来执行此操作。您可以简单地编写一个 JavaScript 对象。我确信其他模板引擎也提供类似的方法来做到这一点。

var person = {
    Name : <%= _person.Name %>,
    Age : <%= _person.Age %>
};

Answer 5

我将实现一个在 document.ready 事件中初始化的 Javascript 单例 AppCacheManager。一点 JS oop，您就拥有了一个成熟的 OOP 数据存储。

每当需要信息时，您可以通过 Ajax / RESTful Web 服务加载它并将其缓存在 AppCache Manager 中。因此，您有 2 个缓存：1. 浏览器缓存（可能是由于 RESTful Web 服务 URL 缓存），以及 2：JS 缓存管理器。

您可以访问对 AppCacheManager 的所有请求，AppCacheManager 透明地获取新数据或返回缓存数据，以便客户端不需要了解任何缓存信息。

简而言之：

• 编写一个 JS CacheManager
• 不要一次获取全部数据，而是在需要时获取小部分数据并缓存它们
• 为缓存管理器定义一个方便的接口

示例用法：

<a href="linkurl" onmouseover="CacheManagerFactory.getInstance().getTooltip('TooltipID');">linktext</a>

在 JS 中不引人注目是一件非常困难的事情，我很渴望对此也有所了解。

希望有帮助。