如何在 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 的依赖项参数中。

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 );
}

Answer 2

你能把你的function PNGPreloader(e,t,i,r,n,a){...} 移到jQuery(document).ready(function($) { ... }); 块之外吗？

这是一个范围界定问题，因为 ui.js 中的代码对 plugins.js 中的 document-ready 调用的函数内部的任何内容都没有可见性。

或者你也可以这样做：

plugins.js：

var fnPNGPreloader;  // globally accessible

jQuery(document).ready(function($) {
    fnPNGPreloader = function (e,t,i,r,n,a) {
        /*.. assuming you do stuff with "$" in here ..*/
    };
    //...
});

ui.js：

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