Question

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

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

我能想到的一些选择是：

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

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

Answer 1

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

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

Answer 2

也许我错过了什么......为什么不只是JSON？

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

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

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

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-id时，我会小心使用data-pid - 尤其是id 1}}属性是指定的。我不确定如果你不这样做会有什么影响，但最好先避免这个问题，而不是因为这个问题而导致网站出现问题。< / p>

希望这就是你要找的东西。

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 Manager中。所以你有2个缓存：1。浏览器缓存，可能是由于RESTful webservice URL缓存，2：JS缓存管理器。

您可以访问AppCacheManager的所有请求，这些请求透明地提取新数据或返回缓存数据，这样客户端就不需要知道缓存的任何内容。

简而言之：

编写JS CacheManager
不是一次性获取整个数据，而是在需要时以小部分获取并缓存它们
为cachemanager定义一个方便的界面

使用示例：

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

不引人注目在JS中是一件非常困难的事情，我也渴望了解这一点。

希望有所帮助。

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

5 个答案: