WordPress中如何在一个JS脚本中调用另一个脚本的函数？

在WordPress的functions.php中先后注册了两个脚本：
首先注册jQuery：

function enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

然后注册自定义脚本：

add_action('wp_enqueue_scripts', 'enqueue_my_scripts'); 
function enqueue_my_scripts() {
wp_enqueue_script(
    'script1',
    get_template_directory_uri() . '/assets/js/script1.js',
    array('jquery'), '1.0', true
);
wp_enqueue_script(
    'script2',
    get_template_directory_uri() . '/assets/js/script2.js',
    array('jquery'), '1.0', true
);
} 

script1.js内容：

jQuery(document).ready(function($) {
   function myFunction1() {
   // do something
   }
 });

script2.js内容：

jQuery(document).ready(function($) {
         myFunction1();
});

控制台报错：Uncaught ReferenceError: myFunction1 is not defined（位于script2.js中）

已确认脚本加载顺序正确、无其他错误，尝试将script1.js改为原生JS并放在全局作用域（去掉document.ready）仍无效，需解决：为何myFunction1在script2.js中无法访问？如何修复该错误？

1. 作用域隔离：myFunction1定义在jQuery(document).ready()的回调函数内部，属于局部作用域，外部（包括另一个ready回调）无法访问该函数。
2. 依赖未正确配置：当前注册script2时仅依赖jQuery，未声明依赖script1，即便加载顺序看似正确，WordPress脚本加载机制无法保证严格执行顺序，且作用域问题才是核心矛盾。
3. 你提到去掉ready仍无效，大概率是修改后的代码仍存在作用域问题，或是浏览器缓存了旧脚本未更新。

方法一：将函数暴露到全局作用域 #

修改script1.js，把函数放到全局作用域，或挂载到window对象上：

// 方式1：直接全局声明
function myFunction1() {
  // do something
}

jQuery(document).ready(function($) {
  // DOM就绪后需执行的逻辑放在这里
});

// 方式2：挂载到window对象（减少全局变量冲突）
jQuery(document).ready(function($) {
  window.myFunction1 = function() {
    // do something
  };
});

修改后在script2.js的ready回调中即可正常调用myFunction1()。

方法二：配置正确的脚本依赖 #

在WordPress注册script2时，将script1添加到依赖数组，确保script1优先执行：

wp_enqueue_script(
    'script2',
    get_template_directory_uri() . '/assets/js/script2.js',
    array('jquery', 'script1'), '1.0', true // 添加'script1'作为依赖
);

同时需确保script1中的myFunction1处于可被script2访问的作用域（比如全局或命名空间）。

方法三：使用命名空间封装（推荐，避免全局污染） #

用IIFE（立即执行函数表达式）封装代码，通过命名空间暴露函数：
script1.js代码：

(function($) {
  // 初始化全局命名空间
  window.MyApp = window.MyApp || {};
  // 挂载函数到命名空间
  MyApp.myFunction1 = function() {
    // do something
  };
})(jQuery);

script2.js代码：

jQuery(document).ready(function($) {
  MyApp.myFunction1();
});

这种方式既保证函数可访问，又能减少全局变量冲突。

额外注意事项 #

• 修改脚本后需清除浏览器缓存，或更新脚本版本号（比如将'1.0'改为'1.1'），确保加载最新代码。
• 避免直接定义过多全局变量，尽量用命名空间或模块化方案组织代码。

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