Question

我有一个页面，我想在地图上显示一些点。我有小模板（像Smarty，但更轻）在模板中我有变量$ points，它包含我需要的点的坐标。我需要将它们传递给javascript（因为只有javascript可以用点渲染该地图）。

我有3个变种。你能告诉我，什么是最好的？

第一种方式： （使用全局变量插入javascript-tags的模板）

tpl.php文件：

<script>
MAP_POINTS = <?php echo json_encode($this->points); ?>;
</script>

.js文件

function renderMap(){
var points = MAP_POINTS; // using global. Is it really bad? or who cares? =))
}

第二种方式： （通过HTML元素传递变量）

tpl.php.file

<input type="hidden" 
       value="<?php echo json_encode($this->points); ?>" 
       id="map_points_container">

.js文件

function renderMap(){
// without globals, but needed to be parsed on local side
var points = $.parseJSON ( $( "#map_points_container" ).val() );
}

第三种方式： （AJAX-way）

我根本没有从模板文件中传递$this->points。我有另一个.php文件来处理我的所有AJAX请求：

Ajaxing.php

function get_map_points($params){
// some operations
return json_encode ($map_points);
}

而且在本地方面，我会有这样的事情：

.js文件

$.post ( 'ajaxing.php', params, 
         function(points){
           renderMap(points);
         }, 'json');

第三种方式是常见的，但如果我已经将一些值从模板传递到本地页面，那么我也可以传递和映射点。事实上，我不需要再对这个地图点做出另一个请求（这就是为什么我不喜欢第三种方式）

但是你可以用另一种方式告诉我吗？更好的方法？

我选择的方式：

第一种方式，几点评论。我的所有“地图渲染”代码都在另一个文件中，它就像：

$(function(){

MAP_APP = {};
MAP_APP.some_prop = null; // some properties
MAP_APP.some_method = function(){}; // some methods

});

所以在模板文件中我只需要扩展我的MAP_APP对象：

<script>
MAP_APP.points = <?php echo json_encode($this->points); ?>;
</script>

是的，全局变量。但它就像整个应用程序的命名空间。

感谢大家。

Answer 1

第一种方式绝对是最不复杂和最快的方式。

第二个添加了一个不必要的额外处理步骤（parseJSON()）。

第三种方法是好的，如果你处理大量可选的数据（即仅在用户请求它时才需要，并且它不是100％确定是否会发生）或动态。它会创建一个新请求，但不会立即可用。

如果你不想使用全局变量，你可以例如将JavaScript函数包装到一个对象中，并从PHP填充一个对象属性：

<script>
MyObject.MAP_POINTS = <?php echo json_encode($this->points); ?>;
</script>

Answer 2

在js外部文件中传递变量还有另一种时髦的方式：）

您的PHP文件：

<script type='text/javascript' src='script.js?id=0&some=<?php echo $whatever?>'></script>

并在script.js中，您可以检索这些值：

var scripts = document.getElementsByTagName('scripts');

// get your current script;
for (var i=0,l=scripts.length;i<l;i++){
   if(scripts[i].src.indexOf('script.js') !== -1) { // or your script name
      var query = scripts[i].src.substr(scripts[i].src.indexOf('?')+1);
      // now you can split the query and access the values you want
      ....
   }
}

Answer 3

第一个是效率最高，速度最快的。第二个是时髦的。第三个也很好。

第一个因为它不需要任何其他请求。第二个有点奇怪，我不会使用那种结构，但这并不意味着你不能。第三个也很好，但你应该考虑一下AJAX是否可行。如果您的应用程序需要针对不同位置的多个点请求，那么它可能是最有效的方法。

Answer 4

我会使用你的第二种方法，因为你不想使用AJAX（而且在当前页面中使用AJAX似乎很奇怪）。您希望限制JavaScript中全局变量的数量，因为JavaScript中的所有内容都会创建每个全局变量的实例，从而降低您的性能。

我忘记了这个人的名字，但那个正在雅虎上进行优化的人然后去上班，谷歌做了关于JavaScript优化的讲座，这是他的观点之一。

编辑：找到链接：http://sites.google.com/site/io/even-faster-web-sites

Answer 5

速度明智的第一种方式是最好的方式。

但最好的方法是从PHP创建XML输出并通过Ajax将该xml加载到Javascript中。最好的例子是google地图文档中提供的文章 - http://code.google.com/apis/maps/articles/phpsqlajax_v3.html

Answer 6

另一种方式：

在script_that_defines_renderMap.js：

function renderMap(points) {
  // take "points" as an argument
}

然后：

<script src="script_that_defines_renderMap.js"/> 
<script>
  var mapPoints = <?php echo json_encode($this->points); ?>;
  renderMap(mapPoints);
</script>

没有全局变量，没问题。

如何将变量从php模板传递给javascript

6 个答案: