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

Question

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

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

我能想到的一些选项是：

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

附：我更喜欢不显眼的解决方案，而且加载/执行时间也很重要。

Answer 1

也许我遗漏了什么……为什么不只是 JSON？

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

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

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

Answer 2

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

如果这不切实际，那么在<script>...</script> 标记中“硬编码”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 和data-geo-y 在地图上显示的工具提示。当然，您可以随意命名。

支持/接受

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

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

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

重要有效性说明

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

一些额外的提示

在 jQuery 1.5 中，我从my question 的回答中听说，您可以简单地指定attr("pid") 来返回data-pid 的值。如果是这种情况，那么在实际属性名称之后命名属性名称的第二部分时我会小心（例如，使用 data-pid 而不是 data-pid - 特别是如果指定了 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 Webservice 加载它并将其缓存在 AppCache 管理器中。所以你有 2 个缓存：1. 浏览器缓存，可能是由于 RESTful Web 服务 URL 缓存，以及 2：JS 缓存管理器。

您访问 AppCacheManager 的所有请求，它透明地获取新数据或返回缓存数据，因此客户端不需要知道任何缓存。

简而言之：

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

示例用法：

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

不显眼在 JS 中是一件非常困难的事情，我也很想知道一些事情。

希望有所帮助。