Как поставить в очередь один скрипт за другим в WordPress `functions.php` и заставить их работать вместе?

Question

У меня есть 2 .js файлы, во-первых plugins.js и, во-вторых, ui.js, и оба видны в "отладке" инспектора, поэтому оба включены.

У меня есть функция jquery в plugins.js что мне нужно позвонить в 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.

Или вы также можете сделать что-то вроде:

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