0

将不应呈现给用户的对象和类别 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!')".

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

4

5 回答 5

1

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

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

于 2010-10-12T18:30:34.423 回答
1

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

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

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

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

于 2010-10-12T19:49:45.670 回答
1

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

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

<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-xdata-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-id使用data-pid- 特别是在id指定属性的情况下。我不确定它会产生什么影响如果您不这样做，则有，但最好首先避免该问题，而不是因此而在以后遇到该站点的问题。

希望这就是你要找的。

于 2010-10-12T19:59:50.370 回答
0

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

var person = {
    Name : <%= _person.Name %>,
    Age : <%= _person.Age %>
};
于 2010-10-12T18:30:02.490 回答
0

我将实现一个在 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 中是一件非常困难的事情，我也很想知道一些相关的事情。

希望有帮助。

于 2010-10-13T14:31:35.747 回答