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

Question

我尝试过两种方法都可以工作,但感觉都不干净.

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

var x = {{ myServersideVariable }}; 

(在我的情况下,我使用的是Jinja2,但同样的东西适用于Django模板,.NET MVC3中的Razor,PHP中的Twig或任意数量的视图模板引擎).

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

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

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

PS
我知道JSON,事实上我有时不得不求助于第一个解决方案,如果我需要传递原语以外的东西.因此,支持传递JSON对象而不在页面上使用javascript的解决方案的奖励积分.

Answer 1

将数据从服务器注入javascript 只有两种正确的方法.

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

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

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

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

Answer 2

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