Question

我尝试了两种方法，但都感觉很干净。

第一个是使用一些内联javascript接受视图模板中的变量，如：

var x = {{ myServersideVariable }};

（在我的情况下，我使用的是Jinja2，但同样适用于Django模板，.NET MVC3中的Razor，PHP中的Twig或任意数量的视图模板引擎）。

显然，关于这一点的不洁部分是html页面中的javascript而不是单独的文件。

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

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

P.S。
我知道JSON，事实上我有时不得不求助于第一个解决方案，如果我需要传递基本的东西。所以支持传递JSON对象而不在页面上使用javascript的解决方案的奖励积分。

Answer 1

只有两种正确的方法可以将服务器中的数据注入javascript。

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

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

现在，如果你想要一个没有JavaScript就无法支持的JavaScript繁重的应用程序，那么你希望你的数据是一个REST服务。

您不希望将其注入序列化的隐藏字段，因为您的html标记没有数据的语义。您不希望将其直接注入var x = ...语句，因为这样您就可以动态编译JavaScript。这打破了关注的分离。

Answer 2

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

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

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

编辑：请注意，尽管您可以在服务器上动态生成JS脚本文件，从而将动态值完全保留在HTML页面之外，但有时这种方法效果不佳，因为某些浏览器可能会混淆并继续使用较早的缓存JS的版本。我已经在旧版本的IE中发生了这种情况。

Answer 3

使用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>

Answer 4

我刚才想到的一个解决方案是服务器生成的javascript文件。我喜欢干净的代码和关注点分离的观点，但它可能会破坏任何类型的浏览器缓存，因此它取决于性能的重要程度。

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

4 个答案: