如何调用嵌套在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);