代码之家 › 专栏 › 技术社区 › Aidas Bendoraitis Rob Sanderson

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

generic-programming language-agnostic html javascript

Aidas Bendoraitis Rob Sanderson · 技术社区 · 14 年前

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

比如说,我有一个项目列表,我可以通过javascript对它们中的每一个做一些事情,例如,显示工具提示HTML,或者通过Ajax添加到收藏夹,或者显示在地图上。在哪里最好保存工具提示HTML、数据库ID或地理位置?

我能想到的一些选择是:

里面有些字典 <script></script> 每个项目的标签,
微格式,
内联XML,
rel 属性,
包含特定信息的CSS类名,例如 class="lat-12345 uid-45678" ,
一 <脚本></script> 使用HTML ID字典映射模板中具有系统值的字典,
从数据库生成并通过 <script src="..."></script> 使用HTML ID字典映射模板中具有系统值的字典,
Ajax请求所有情况,当我需要更多信息而不仅仅是ID时,
带有HTML标记内参数的事件处理程序,例如 onmouseover="tooltip(this, 123, 'Hello world!')" .

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

5 回复 | 直到 14 年前

ChaosPandion 14 年前

也许我错过了什么…为什么不只是JSON?

如何“发送”它(在初始页面加载为“javascript”或通过Ajax或其他方式)实际上只是一个小细节,主要取决于数据何时可用。(JSON是合法JavaScript语法的一个子集。)

那么这只是一个正确转换的问题。当然,通过将其推送到JSON/JS,您可能会使一些非JS客户机不可互操作,如果这是您的考虑因素的话。如果事实确实如此,为什么不使用您放在最前面的任何数量的技术,很好地执行转换服务器端呢?

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

VoteyDisciple 14 年前

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

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

Community Mofi 7 年前

你可以使用的一种方法是 自定义属性 . 我想你说这个是 微格式 但是我不完全确定它们是否是相同的,所以我在下面写了一个描述。

我以前也碰到过同样的问题,基本上我使用了如下的方法:

<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 使用用户可以采取的其他操作,例如在mouseover上显示工具提示,使用 data-description 或在地图上显示 data-geo-x 和 data-geo-y . 当然,你可以随便给这些名字命名。

支持/接受

这正成为一种完全可以接受的做你想做的事情的方式。HTML5支持这一点,这正是您试图实现的目标。

所以它被HTML5支持,但是HTML4呢?

它可能会使HTML4无效,但世界正朝着更大更好的方向发展。旧版本的浏览器(IE6和以前的版本,FF1/2,Opera7/8/9)越来越不常见,所以不应该是问题。实际上不会打破较旧的浏览器-功能仍然有效。

重要有效性说明

确保预先准备好 data- 属性名。这将使该属性在HTML5中完全有效。

一些额外的提示

在jQuery中 一点五 ,我听到了 my question 您可以简单地指定 attr("pid") 返回的值 data-pid . 如果是这种情况,那么在将属性名的第二部分命名为实际属性名之后(例如,而不是 data-id 使用 数据PID -尤其是如果 id 已指定属性。我不确定如果你不这样做会有什么影响,但最好首先避免这个问题,而不是因为这个问题在以后的某个日期与网站发生问题。

希望这就是你想要的。

ChaosPandion 14 年前

ASP.NET提供了一种非常方便的方法。您可以简单地编写一个javascript对象。我相信其他模板引擎也会提供类似的方法。

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

ovm 14 年前

我将实现在document.ready事件中初始化的javascript singleton AppCacheManager。有点JSOOP,你就有了一个成熟的OOP数据存储。

无论何时需要信息,您都可以通过Ajax/Restful Web服务加载它,并将其缓存在AppCache管理器中。所以有两个缓存:1。浏览器缓存(可能是由于RESTful WebService URL缓存)和2:JS缓存管理器。

您可以访问对AppCacheManager的所有请求,这些请求透明地获取新数据或返回缓存的数据,这样客户机就不需要了解任何缓存。

简而言之:

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

示例用法:

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

在JS中,不引人注目是一件非常困难的事情,我也希望知道一些关于它的事情。

希望有帮助。