将许多服务器端信息传递给JavaScript的最佳实践是什么？

Question

可以说我的页面里面有很多Javascript。 现在，仅通过使用一些Print / Echo语句初始化JavaScript值，就很容易初始化变量。

Example: var x = <?php echo('This is a value');?>

我首先想到我可以按功能的参数传递所有变量值，但这是不可能的，因为我们有很多值（我们有一个多语言网站，所有文本都来自服务器（BD））。

Example : initializeValues(<?php echo('Value1,Value2,Value3,Value...');?>);//JS Method that can be external of the page

当我们想从页面上删除所有JavaScript来移动外部 JavaScript文件上的所有内容时，还会出现更多问题。 初始化所有这些变量的好方法是什么？ 如果我通过使用文档的OnLoad绑定JavaScript方法，将无法使用Print / Echo方法填充所有值。

解决这个任务有什么好的模式吗？

Answer 1

一个非常流行的模式是使用JSON格式。 有产生它的库，而Javascript直接使用它。

Answer 2

使用php可以创建一个关联数组，然后使用json_encode可以对其进行序列化以在某些脚本标签之间的页面上输出。

有关执行此操作的一些示例，请查看http://www.php.net/manual/zh/function.json-encode.php

Answer 3

这是我的方法：

<?php

$foo = array('bar' => 'gork');

?>
<input id='foo' type='hidden' value='<?= json_encode($foo); ?>' />

然后客户端（我正在使用原型）：

var foo = $F('foo').jsonParse();
alert(foo.bar);

Answer 4

var x = <?php echo('This is a value');?>

呃，不，最终会变成：

var x = This is a value

（语法错误。）您想要：

var x = <?php echo json_encode('This is a value', JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_QUOT);?>

PHP 5.3中的HEX_TAG转义避免了</序列出现在<script>块中的问题。 当您将代码放入由"或非CDATA XHTML脚本块分隔的属性值中时，需要使用AMP和QUOT编码来确保"和&字符没有问题" 。 如果仅使用HTML脚本块（或XHTML CDATA脚本块），则可以不用它们（尽管它们也没有害处）。

json_encode还将愉快地对值数组进行编码以放入JS变量中，而不仅仅是字符串。

More problem come when we want to take off all JavaScript from pages to move everything on external JavaScript file.

最好将所有静态代码（包括绑定到事件侦听器的代码）放在外部JavaScript文件中。 但是，每页数据仍应保留在页面上，无论是文档本身的适当属性（例如，不干扰脚本的类名）还是简单的<script type="text/javascript">var data= ...;</script>块，没有其他代码。

Answer 5

最佳实践？ 从服务器传递值到客户端js对于单一的最佳实践来说太不稳定了。

假设您使用Smarty。 那么， 我的最佳做法是：

<script type="text/javascript">
var limit = Number("{$limit}");
var msg = "{$msg}";

{literal}
// code using the variables
{/literal}
</script>

但我也可以将其视为一种非常明智的方法：

function to_js_vars(arrray $jsvars)
{
    foreach ($jsvars as $name => $info) {
        printf(
            "var %s = %s("%s");\n"
          , $name
          , $info['type']
          , $info['val']
        );
    }
}

其中$info['type']是Number ， Boolean和'' （空字符串）之一，其他所有内容