Question

我们的应用程序使用了很多配置选项。这些选项需要以用户首选项，网站范围首选项等形式反映在客户端。

目前，我们以JSON的形式将服务器端设置传递到客户端，JSON存储在特定元素的标记中的自定义属性中（不，我们的应用程序目前不担心W3C验证）。然后，我们从custom属性中检索数据，并将其解析为JSON对象，以便在使用jQuery的脚本中使用。

这样做的一个缺点是引用事件处理程序中元素的属性。我知道这是不赞成的，因为它可以创建循环引用，随后内存泄漏。我更喜欢使用jQuery的数据函数，但是你不能在页面渲染时从服务器端调用它。

在这种情况下，其他人都做了什么？

Answer 1

以JSON格式返回服务器数据。您可以通过返回JSON标头或简单页面输出和JSON.parse()来通过AJAX执行此操作。

您可以将JSON数据直接分配给元素的数据。

$('#elementid').data('serverdata', data);

更新

在更好地了解您的情况后，我建议您使用data-属性有三个原因。

您将拥有符合标准的标记。
最新版本的jQuery依赖于.data函数。
此更改只需对您当前的应用程序进行少量修改（更改自定义属性从customAtt="value" 输出到 data-customAtt="value"的方式

Here是有关数据属性的更多信息。

Answer 2

您可以在页面中呈现一个内联脚本，该脚本定义具有所有首选项的JS对象。这样，您的脚本可以在浏览器完成页面加载时访问数据。缺点：

你在页面中有内联脚本，有些人皱眉;
缓存页面可能会导致将oder首选项用于特定页面实例;
每个页面大小都会随着prefs大小而增加。

或者您可以在页面中呈现指向声明首选项的外部脚本的链接。这样，首选项不会阻止页面呈现，并且可以由浏览器单独缓存。缺点：

页面可能会使用较旧的首选项呈现，然后更新到新的首选项，这些首选项在较慢的网络上可能是可见的;

或者您可以使用HTML5数据属性直接将数据添加到元素（因此符合HTML5和jQuery.Data兼容，因为它也使用这些属性）。缺点：

你失去了IE的支持;

Answer 3

在我的项目中，我通常会将这些数据作为全局JavaScript变量呈现在母版页的顶部：

<script language="javascript">
var g_someOption=<%= Options.SomeOption.SerializeToJsonLiteral() %>;
var g_someOtherOption=<%= Options.SomeOtherOption.SerializeToJsonLiteral() %>;
// or
var g_globalOptions = {
    thirdOption:<%= Options.ThirdOption.SerializeToJsonLiteral() %>,
    foursOption:<%= Options.FourthOption.SerializeToJsonLiteral() %>
};
// or even via special helper that renders object above
<%= Html.RenderGlobalScriptVars() %>
</script>

如果项目充满了AJAX并且用户可以在某个页面上停留很长时间，则可以使用对服务器的AJAX请求定期刷新设置。

P.S。我已经使用了aspx语法，但我相信即使你使用其他语言也有一个想法。

Answer 4

我通常使用MVC，所以我习惯在页面加载时调用AJAX来获取我可能需要的对象。我不确定你正在使用什么技术，但是设置一个返回这个JSON的端点并在DOM准备就绪时调用它应该不会太难。然后，您可以将其存储为JavaScript变量，而不必担心将其填充到某个元素的属性中。

Answer 5

一个很好的折衷方案是渲染一个配置对象，该对象由您用于节点的ID（或任何其他允许处理程序查找数据的方案）键入。在加载页面后设置处理程序而不是使用内联处理程序。然后，应该很容易引用服务器端创建的json。

此示例使用半全局

<script>
$(function() {
  // The following line would be generated in php using something like:
  // var cfg = <?= json_encode($cfg) ?>; 
  var cfg = {
     orders: [{total: 25, itemCount: 10}], 
     waiting: [{total: 20, reason: "Out of strock"}]
  };
  $('orders').click(function(){
    alert('You have a total of ' +  cfg.orders[0].itemCount + 'orders');
  });
})
</script>

<body>
<div id='orders'> Here are your orders</div>
</body>

或者，如果您真的想要调整变量的范围，可以执行以下操作：

<script>
$(function() {
  $('orders').click(function(){
    var orders = <?= json_encode($orders) ?>; 
    alert('You have a total of ' +  orders[0].itemCount + 'orders');
  });
})
</script>

<body>
<div id='orders'> Here are your orders</div>
</body>

上面的示例不太灵活，因为如果需要，您无法重用其他处理程序中的orders变量。

Answer 6

只需添加其他选项，您就可以随时执行

<script type="text/javascript" src="settings.php"></script>

从PHP输出内容。例如，您可以使用它来调用必要的数据调用。只需发送正确的标题即可。

在客户端将服务器端变量传递给JavaScript的最佳方法是什么？

6 个答案:

更新