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 shortcut。它告诉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中没有脚本加载器工具吗？

在文件中拆分jquery函数？

4 个答案: