[英]What is the best way to pass server side variables to JavaScript on the client side?
我们的应用程序使用了很多配置选项。 这些选项需要以用户首选项、站点范围首选项等的形式反映在客户端。
目前，我们以 JSON 的形式将服务器端设置传递给客户端，该 JSON 存储在特定元素的标记中的自定义属性中（不，我们的应用程序目前不担心 W3C 验证）。 然后，我们从自定义属性中检索数据，并使用 jQuery 将其解析为 JSON 对象以在脚本中使用。
这样做的一个缺点是从事件处理程序中引用元素上的属性。 我知道这是不受欢迎的，因为它会创建循环引用，并随后导致内存泄漏。 我更喜欢使用 jQuery 的 data 函数，但是您不能在页面呈现时从服务器端调用它。
在这种情况下，其他人会怎么做？
以 JSON 格式返回服务器数据。 您可以通过 AJAX 返回 JSON 标头或简单的页面输出和JSON.parse() 。
您可以将 JSON 数据直接分配给元素的数据。
$('#elementid').data('serverdata', data);
在更好地了解您的情况后，我建议您出于三个原因使用data-属性。
.data函数。customAtt="value"更改为data-customAtt="value"以下是有关数据属性的更多信息。
您可以在页面中呈现一个内联脚本，该脚本定义了一个具有所有首选项的 JS 对象。 这样，您的脚本就可以在浏览器完成页面加载时访问数据。 缺点：
或者，您可以在页面中呈现一个指向声明首选项的外部脚本的链接。 这样，首选项不会阻止页面渲染，并且可以由浏览器单独缓存。 缺点：
或者您可以使用 HTML5 数据属性直接将数据添加到元素（因此符合 HTML5 和 jQuery.Data 兼容，因为它也使用这些属性）。 缺点：
在我的项目中，我通常将这些数据作为全局 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 向服务器请求定期刷新设置。
PS 我使用过 aspx 语法，但我相信即使您使用其他语言，您也会有一个想法。
只是为了添加另一个选项，您可以随时执行
<script type="text/javascript" src="settings.php"></script>
从 PHP 输出东西。 例如，您可以使用它来调用必要的数据调用。 只需发送正确的标题。
我通常使用 MVC，所以我习惯于在页面加载时进行 AJAX 调用以获取我可能需要的对象。 我不确定您使用的是什么技术，但是设置一个返回此 JSON 并在 DOM 准备就绪时调用它的端点应该不会太难。 然后你可以将它存储为一个 JavaScript 变量，而不必担心将它填充到某些元素的属性中。
一个很好的折衷方案是呈现一个配置对象，该对象由您用于节点的 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 变量。
将客户端 javascript 时钟与服务器日期同步的最佳方式
[英]The best way to synchronize client-side javascript clock with server date
将许多服务器端信息传递给JavaScript的最佳实践是什么？
[英]What is the best practice to pass many server side information to JavaScript?
处理存储为javascript变量的服务器端数据的最佳方法是什么
[英]What is the best way to deal with server side data saved as a javascript variable
Asp.net。 服务器端验证和客户端验证很好地协同工作的最佳方式是什么
[英]Asp.net. what’s the best way that server side validation and client side validation work together nicely
使用nodejs + express处理服务器端和客户端错误的最佳方法是什么
[英]What's the best way to deal with an error in the server side and in the client side using nodejs + express
什么是客户端javascript，什么是服务器javascript？
[英]What is client side javascript and what is server side javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.