Разделение функций jquery на файлы?

Question

У меня есть несколько функций, которые используют jquery, которые вызываются на разных страницах. Мне интересно, можно ли определить эти функции в одном файле, а затем вызывать их в разных файлах, которые включены после исходного файла.

Вот пример:

## default.js
$(function() {
    // jquery specific functions here...
    function showLoader(update_area) {
        update_area.ajaxStart(function() {
            update_area.show();
            $(this).html('<img id="loading" src="images/loading.gif" alt="loading" />');
        });
    }   
});

## other_file.js (included after default.js)
update_area = $('#someDiv');
showLoader(update_area);

Когда я делаю это, firebug выдает мне 'showLoader не определен. Я предполагаю, что это из-за области действия $ (function () {}); который содержит специфичные для jquery функции. Если это так, то не значит ли это, что мне понадобится один и тот же код, определяющий функции в каждом файле js, в который я их вызываю?

Как мне правильно разделить эти вещи?

Спасибо!

Answer 1

Вам не нужно помещать определение showLoader в $(function(){}), но вызов showLoader, например ::

## default.js

function showLoader(update_area) {
    update_area.ajaxStart(function() {
        update_area.show();
        $(this).html('<img id="loading" src="images/loading.gif" alt="loading" />');
    });
}

## other_file.js
$(function(){
    update_area = $('#someDiv');
    showLoader(update_area);
});

$(function(){some_code;}) является ярлыком jQuery . Он сообщает jQuery, что нужно запускать этот код после завершения загрузки документа.

Answer 2

Может быть лучше написать плагин:

// default.js
$.fn.showLoader = function() {
    this.ajaxStart(function() {
        this.show();
        $(this).html('<img id="loading" src="images/loading.gif" alt="loading" />');
    });
};


// other_file.js
$(function() {
    $('#someDiv').showLoader();
});

Answer 3

Проблема не в том, что у вас есть несколько файлов, а в том, что javascript имеет область действия функции, что означает, что если вы определяете что-то (включая другую функцию, как вы сделали с showLoading) внутри функции, это будет доступно только внутри этой функции .

function callMe() {
    var foo = 'bar';
    foo; // is 'bar'
}

foo; // is undefined


function callMe() {
    function foo() {}
    foo; // is a function
}
foo; // undefined

Answer 4

Вам нужно разрешить зависимости самостоятельно, если я не ошибаюсь. В jquery нет средства загрузки скриптов?