在 WooCommerce 中从 PHP 向 JavaScript 传递数据的最佳实践

在 PHP 和 JavaScript 之间传递数据有时会很棘手，尤其是在避免页面重新加载或处理动态内容时。WordPress和 WooCommerce 为我们提供了多种简化方法，包括 wp_localize_script 和 wc_enqueue_js。以下是常用方法的详细介绍，以及根据项目需求选择最佳方法的技巧。

1.使用 wp_localize_script 从 PHP 向 JavaScript 传递数据

从 PHP 向 JavaScript 传递数据的一种常用方法是使用 WordPress 内置的 wp_localize_script 函数。这个函数最初是为多语言和本地化而设计的，现在常用于将数据与插入脚本关联起来，从而将数据从 PHP 传递到 JavaScript。下面是一个使用示例：

add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' );

function enqueue_custom_script() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true );

    $data_array = array( 123, 456, 789 ); // Replace with your dynamic data
    wp_localize_script( 'custom-js', 'myData', array(
        'imageIDs' => $data_array
    ));
}

这段代码把 PHP 数据作为 JavaScript 全局对象输出到 HTML 中，为我们提供了一种在 JavaScript 中无缝使用 PHP 数据的方式，允许我们在 JavaScript 文件中访问 myData.imageIDs。当处理大型数据集或更复杂的数据结构时，wp_localize_script 尤其有用。

2.将数据嵌入 HTML 数据属性

对于较小或较静态的数据集，我们可以通过 HTML 数据属性将 PHP 数据传递给 JavaScript。这种方法可将 PHP 数据直接嵌入 HTML 中，从而使 JavaScript 可以通过 DOM 元素轻松访问这些数据，示例代码如下。

<?php
$data_array = array( 123, 456, 789 ); // Replace with your dynamic data
echo '<div id="gallery" data-image-ids="' . esc_attr( json_encode( $data_array ) ) . '"></div>';
?>

<script>
const imageIDs = JSON.parse(document.getElementById('gallery').dataset.imageIds);
console.log(imageIDs); // Access your image IDs here
</script>

这种方法可以提供缓存优势，而且不需要额外的 JS 排队，它最适合静态数据或较小的数据集。

3.使用 WooCommerce 专属的 wc_enqueue_js

对于 WooCommerce 项目，wc_enqueue_js 是一个非常有价值的工具，它允许我们将 PHP 数据注入 JavaScript，而无需注册或插入一个新脚本。你只需在 JavaScript 中直接显示 PHP 变量即可。

$data_array = array( 123, 456, 789 ); // Replace with your dynamic data
wc_enqueue_js( "
    var imageIDs = " . json_encode( $data_array ) . ";
    console.log(imageIDs);
");

如果我们需要在不创建新脚本的情况下对 WooCommerce 功能进行轻量级调整，这种方法尤其有效。在 WooCommerce 中进行特定操作时，我们还可以避免使用 wp_localize_script。

总结一下

无论我们选择 wp_localize_script、HTML 数据属性还是 WooCommerce 的 wc_enqueue_js 函数，每种方法都有其优势。对于复杂或大型数据集，wp_localize_script 通常是最佳选择。对于较简单、较小的数据，HTML 属性可以简化设置。而对于 WooCommerce 特有的调整，wc_enqueue_js可以快速访问数据，而无需额外的脚本。