如何调用嵌套在 JQuery 插件中的函数？

Question

我的目标是能够调用我的 JQuery 插件中的函数。

什么是正确的语法？

例如，这不起作用：

<a href="#" id="click_me">Click Me</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
(function($) { 
    $.fn.foo = function(options) {
        do_stuff = function(){
            console.log("hello world!"); // works
            do_other_stuff = function(){
            alert("who are you?");
            }
        } // function
    } // function
})(jQuery);

$("body").foo();

$("#click_me").click(function(){
$.fn.foo.do_stuff.do_other_stuff(); // doesn't work
});

</script>

Answer 1

当您将函数分配给没有 var 关键字的变量时，它们要么覆盖该名称的局部变量，要么被添加到全局命名空间中。 （所以你的 do_stuff 是一个全局函数，这不是你想要的）

做你想做的事的一种方法是明确地给出你希望你的函数驻留在哪里。

(function($) { 
    $.fn.foo = function(options) {
        // whatever $().foo() should do
    };

    $.fn.foo.do_stuff = function() {
        console.log("hello world!");
    };

    $.fn.foo.do_stuff.do_other_stuff = function(){
        alert("who are you?");
    };
})(jQuery);

编辑：

这是因为 javascript 中的所有函数都是对象，这意味着您可以为任意属性赋值。

如果您想访问其他函数的变量，您可以将定义移到其他函数中，例如：

$.fn.foo.do_stuff = function() {
    console.log("hello world!");
    $.fn.foo.do_stuff.do_other_stuff = function(){
        alert("who are you?");
    };
};

但这意味着该函数仅在您运行另一个函数时才定义，并且每次运行该函数时它都会覆盖最后一个定义。

可能更理想的解决方案是让每个函数返回一个包含嵌套函数的对象，如下所示：

(function($) { 
    $.fn.foo = function(options) {
        // whatever $().foo() should do

        var do_stuff = function(do_stuff_args) {
            console.log("hello world!");
            // do stuff with options and do_stuff_args

            var do_other_stuff = function(other_args) {
                alert("who are you?");
                // here you have access to options, do_stuff_args, and other_args
            };

            return {
                do_other_stuff: do_other_stuff
            };
        };

        return {
            do_stuff: do_stuff
        }
    };
})(jQuery);

并使用它调用它

foo().do_stuff(some_options).do_other_stuff(other_options);

或

var a = foo(stuff).do_stuff(some_options);
a.do_other_stuff(foo);
a.do_other_stuff(bar);