将所有静态字符串数据保存在PHP文件中是一个很好的做法。如果你需要在 JavaScript 使用一些数据,在HTML中将你的数据作为 data-* 属性也是一个好方法。但是在某些特定的情况下,你没有其他选择,只能将字符串直接传递到 JavaScript 代码中。
如果你引用了一个 JavaScript 库,并且你需要在 header.php 文件中初始化 JavaScript对象,然后传递数据到它的属性中,那么这篇文章很适合你。本文将教你如何正确地传递PHP数据和静态字符串到你的JavaScript库。
为什么需要传递数据到JavaScript
让我举例说明一些需要将数据传递到JavaScript 的典型场景。例如,有时我们需要得到这些值转换成JavaScript代码:
- 首页,管理后台,插件,主题或 ajax URL,
- 翻译的字符串,或
- 一个主题或WordPress的选项
传递数据的常用方式
比方说,我们有一个叫 myLibrary.js 一个jQuery的文件,要引入到我们的WordPress站点:
var myLibraryObject;
(function($) {
"use strict";
myLibraryObject = {
home: '', // populate this later
pleaseWaitLabel: '', // populate use this later
someFunction: function() {
// code which uses the properties above
}
}
});
我们在主题的 functions.php 通过下面的代码调用它:
wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
现在的问题是,我们如何才能填充 home 和 pleaseWaitLabel 属性,你可能已经本能地在 header.php 添加了这些代码来得到所需的数据:
<script>
(function( $ ) {
"use strict";
$(function() {
myLibraryObject.home = '<?php echo get_stylesheet_directory_uri() ?>';
myLibraryObject.pleaseWaitLabel = '<?php _e( 'Please wait...', 'default' ) ?>';
});
}(jQuery));
</script>
这样可以实现我们的目的,但是,WordPress已经为我们提供了一个更好的和更短的方式来做到这一点。
WordPress的方式
将数据传递到 JavaScript 的推荐方法是使用 wp_localize_script() 函数。此功能意味着您要使用wp_enqueue_scripts() 来排队脚本后才使用。
wp_localize_script( $handle, $objectName, $arrayOfValues );
下面是该函数的参数:
$handle (字符串)(必填) 你所要附加数据的处理脚本
$objectName (字符串)(必填) 将包含数据的脚本对象名称(也就是所要翻译文本的前缀)
$arrayOfValues 包含名称和要传递给脚本值的关联数组
调用此函数之后,$objectName 变量将在指定的脚本中可用。
执行 wp_localize_script
让我们使用我们的新数据传递的方法来调整前面的例子。首先,我们排队脚本然后在我们的functions.php 使用 wp_localize_script 调用 :
wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
$dataToBePassed = array(
'home' => get_stylesheet_directory_uri(),
'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_localize_script( 'my_js_library', 'php_vars', $datatoBePassed );
现在我们的 home 和 pleaseWaitLabel 值可以被我们的jQuery库内部通过php_vars变量访问。
由于我们使用了 wp_localize_script,我们没必要在 header.php 运行任何东西,现在可以安全地删除<script>标签的内容:
<script>
(function( $ ) {
"use strict";
$(function() {
myLibraryObject.home = '<?php echo get_stylesheet_directory_uri() ?>';
myLibraryObject.pleaseWaitLabel = '<?php _e( 'Please wait...', 'default' ) ?>';
});
}(jQuery));
</script>
我们也可以从我们的jQuery脚本删除其他属性。它现在可以被简化为这样:
var myLibraryObject;
(function($) {
"use strict";
myLibraryObject = {
someFunction: function() {
// code which uses php_vars.home and php_vars.pleaseWaitLabel
}
}
}(jQuery));
结论
通过使用 wp_localize_script,我们的代码更简单,我们的header.php更干净。希望你可以在自己的代码中使用此功能,并享受其好处。
原文出处:http://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript–wp-34699,由 倡萌@WordPress大学 翻译整理。
支持一下。。。。。。。。。。。。。。。。。。。。。
感谢博主的分享,肯定会有很多人在自己的代码中使用此功能,并享受其好处,加油~