javascript - 如何在 WordPress `functions.php` 中将一个又一个脚本排队，并让它们一起工作？

Question

我有 2 个 .js 文件，第一个是 plugins.js，第二个是 ui.js，并且两个文件都是可见的在检查器的“调试”上，因此两者都被包含在内。

我在 plugins.js 中有一个 jquery 函数，我需要在 ui.js 中调用它，所以我将 plugins.js 加入队列首先，在其正下方，我将 ui.js 加入队列。

但是，网络浏览器中的控制台告诉我该函数未定义，并且它不起作用。

如果我将函数从 plugins.js 剪切并粘贴到 ui.js 中，它就会起作用。当我在 JSfiddle 中尝试时它也起作用了。

functions.php

function add_scripts() { 

wp_enqueue_script( 'plugins', get_template_directory_uri() . '/javascript/plugins.js', array( 'jquery', 'jquery-ui-core' )           , '1.0.0', true );
wp_enqueue_script( 'ui'     , get_template_directory_uri() . '/javascript/ui.js'     , array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'add_scripts');

plugins.js:

jQuery(document).ready(function($) {
    function PNGPreloader(e,t,i,r,n,a){...}
});

ui.js:

jQuery(document).ready(function($) {
    $(...).each(function(){
        mobileIcons[ID] = new PNGPreloader($object,frames,size[0],size[1],20,false);
    });

如果我将 plugins.js 中的函数放入 ui.js 中，它就会起作用:

jQuery(document).ready(function($) {
    function PNGPreloader(e,t,i,r,n,a){...}
    $(...).each(function(){
        ... = new PNGPreloader(...);
});

Answer 1

应该将jquery-ui-widget添加到wp_enqueue_script的dependency参数中。

function stripesinteriors_theme_resources() { 
    wp_enqueue_script( 'plugins', get_template_directory_uri() . '/javascript/plugins.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-widget' ), '1.0.0', true );
    wp_enqueue_script( 'ui'     , get_template_directory_uri() . '/javascript/ui.js'     , array()                                                , '1.0.0', true );
}