WordPress中实现在已入队JS文件间读取JavaScript变量

1. 确保JS文件的入队顺序正确 #

首先要保证main.js在sample.js之前加载，否则sample.js执行时目标变量还未定义。在functions.php的wp_enqueue_scripts钩子中，给sample.js添加依赖项指向main.js：

add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts() {
    // 入队main.js
    wp_enqueue_script('main-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true);
    // 入队sample.js，依赖main.js
    wp_enqueue_script('sample-script', get_template_directory_uri() . '/js/sample.js', array('main-script'), '1.0', true);
}

第三个参数array('main-script')会告诉WordPress，sample-script必须在main-script加载完成后才执行。

2. 正确暴露变量到全局作用域 #

在main.js中，不要将departDateOneWay定义在局部作用域（比如闭包或函数内部），而是通过以下两种方式暴露：

方法一：挂载到window对象 #

// main.js
window.departDateOneWay = '你的日期值'; // 替换为实际变量值

在sample.js的点击事件中直接访问：

// sample.js
document.getElementById('目标按钮ID').addEventListener('click', function() {
    console.log(window.departDateOneWay); // 正常读取变量
});

方法二：使用自定义命名空间（更推荐，避免全局污染） #

// main.js
// 创建全局命名空间
window.MyApp = window.MyApp || {};
// 将变量存入命名空间
window.MyApp.departDateOneWay = '你的日期值';

在sample.js中访问：

// sample.js
document.getElementById('目标按钮ID').addEventListener('click', function() {
    console.log(MyApp.departDateOneWay);
});

3. 避免将JS文件改为PHP包裹脚本的误区 #

你之前尝试把main.js改成PHP包裹脚本导致网站无法加载，大概率是因为语法错误（比如PHP标签未正确闭合、输出的JS格式有误）。这种做法完全没必要，通过上述全局作用域或命名空间的方式就能安全实现变量共享。

内容的提问来源于stack exchange，提问作者user1207289