将服务器端变量传递给javascript的最佳实践？

我试过两种方式，但都工作，但都不觉得很干净。将服务器端变量传递给javascript的最佳实践？

首先是有一个从像视图模板接受变量一些内嵌的JavaScript：

var x = {{ myServersideVariable }};

（在我来说，我使用Jinja2的，但同样的事情也适用于Django模板，剃刀英寸NET MVC3，PHP中的Twig或任意数量的视图模板引擎）。

很明显，关于这个问题的不清楚的部分是，在html页面中存在javascript而不是在单独的文件中。

我使用的另一个选项是有一个隐藏的字段填充服务器端，然后在Javascript端消耗。这感觉稍微更干净，但不完全，写起来也有点麻烦。

有更好的解决方案还是那些几乎是我唯一的选择？

P.S.
我知道JSON，事实上，如果我需要传递除基元以外的东西，我有时必须诉诸第一种解决方案。因此，支持在页面上不使用JavaScript的情况下支持传递JSON对象的解决方案的奖励点。

来源

2011-05-08 Davy8

您是否听说过** node.js **？我认为这可以帮助你... – diEcho 2011-05-08 14:04:07

@diEcho：Node.js如何可能在这里帮助？ – 2011-05-08 14:08:44

@Matt球我只听说node.js，它是服务器端JavaScript ...这就是为什么我写'我想'这个词....请纠正我，如果我错了......谢谢 – diEcho 2011-05-08 14:16:02

使用JSON将变量从服务器传递到客户端，因为它是非常受欢迎和支持的格式。 PHP，Python，Java和 - 最重要的是 - JavaScript处理得非常好。您不必关心字符转义等。

// PHP Example 

$vars = array(
    'a' => 'def', 
    'c' => 'xyz', 
    'e' => array(1, 34, 766, 844) 
); 

... 

var variablesFromServer = <?php echo json_encode($vars) ?>; 
// or using Twig 
var variablesFromServer = {{ vars|json_encode }}; 

alert(variablesFromServer.e[2]); // output: 766

它在其他语言中看起来非常相似。

您始终可以使用单个入口点（variablesFromServer变量）来传递应从服务器传递给客户端的所有信息。这会让你的代码干净而且容易维护。

最终用途 - 从客户的角度 - 也非常简单：我只是想的

<script src="..."></script> 
<script src="..."></script> 
<script src="..."></script> 
<script> 
    var variablesFromServer = ...; 

    MyProject.setConfiguration(variablesFromServer.config); 
    MyProject.setRuntimeVariables(variablesFromServer.runtime); 
    MyProject.run(); 
</script>

来源

2011-05-08 14:07:39 Crozin

OP不说他正在使用PHP '作为服务器端语言 – diEcho 2011-05-08 14:16:37

这正是我说我的第一个解决方案。我想我并不完全清楚我的意思是“内嵌的JavaScript”我的意思是在与html相同的页面上使用Javascript，而不是在单独的文件中。它有效，但感觉不干净。 – Davy8 2011-05-08 14:29:20

@diEcho问题不在于它是PHP，我可以将它翻译成任何语言，但问题是这是我在问题中已经提到的解决方案，我提到了我认为的问题。 – Davy8 2011-05-08 14:31:11

一种解决方案是服务器生成的JavaScript文件。我喜欢从清晰的代码和关注点的角度分离，但它可能会杀死任何类型的浏览器缓存，因此这取决于性能的重要性。

来源

2011-05-08 14:41:03 Davy8

不仅会停止浏览器缓存JS文件，您可能会发现某些浏览器会感到困惑，并继续使用旧版JS文件的缓存版本，而不是获取新生成的文件。（我曾在IE的旧版本中发生过这种情况。） – nnnnnn 2011-05-09 01:54:21

只有两个将数据从服务器注入到javascript中的正确方法。

您要么将数据公开为服务。您可以拥有REST服务或任何您喜欢的服务，然后使用ajax从中提取数据。

另一个选项是将数据注入HTML。你想使用JavaScript来逐步增强你的页面。因此，数据已经存在于HTML中，并且您的JavaScript将从HTML中提取它。

现在，如果您打算使用JavaScript不支持JavaScript的重度应用程序，那么您希望您的数据成为REST服务。

你不想将它注入一个序列化的隐藏字段，因为那么你的html标记没有数据的语义。你不想直接将它注入到var x = ...声明中，因为这样你就可以即时编译你的JavaScript。这打破了关注的分离。

来源

2011-05-08 14:59:06 Raynos

我同意你的大部分答案，但我没有看到“即时编译你的JavaScript”如何打破关注点的分离？ – Davy8 2011-05-08 15:05:46

另外一个我现在使用的实际上是搞清楚AJAX调用的URL（它可以很容易地是一个post/get参数，但我使用url路径来提供参数服务器端）。为了举例，我们假设这是一个国际象棋游戏，玩家可以在单独的选项卡中一次参与多个游戏，每个选项卡都有自己的url。在每一页上，我需要知道我想要制作关于AJAX请求的游戏。我如何检索这些信息？ – Davy8 2011-05-08 15:11:21

@ Davy8确实如此。您的JavaScript与您的服务器端代码很难耦合。你应该避免注入数据到你的JavaScript。至于网址。将网址注入到'。该数据进入你的HTML。然后，你可以让JavaScript获取你的链接，并把它变成一个Ajax链接。 – Raynos 2011-05-08 15:16:08

如果您希望客户端JavaScript访问的数据在HTML页面被请求/生成时已知并且在下一次请求页面之前不会改变，那么我不会使用AJAX，因为显然这会导致一个额外的请求：一个是获取主页面，另一个是立即加载，以便对数据进行AJAX调用。这会降低性能并且无意义地使客户端和服务器代码复杂化。

用数据创建一个或多个隐藏输入并从JavaScript代码访问没有任何问题。根据您想要传递的值，可能更容易将值直接注入到页面上<script>部分的JS变量中，类似于您给出的示例，并且我个人发现比隐藏输入更容易阅读，因为<script>部分将在页面顶部显示，而不是将输入掩埋在HTML中的某个位置，这使得显而易见的是，这些值将被客户端的代码使用，而不仅仅是用其他表单数据提交。但无论哪种方式都不是“不洁净”的。

如果您需要将服务器端数据放入您的JavaScript中，作为用户在加载（点击按钮或某物）后在页面上执行的操作的响应，或者您希望定期轮询服务器检查值是否已更改，然后然后您要使用AJAX。

编辑：请注意，虽然您可以动态生成服务器上的JS脚本文件，从而完全保留您的动态值完全脱离HTML页面有时这不工作得很好，因为某些浏览器可能会感到困惑并继续使用更早JS的缓存版本。我在旧版本的IE中遇到过这种情况。

来源

2011-05-09 01:44:44 nnnnnn

将服务器端变量传递给javascript的最佳实践？

回答

相关问题