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

2022-01-11 00:00:00 closures jquery jquery-plugins javascript

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

My goal is to be able to call functions that are inside my JQuery plugin.

什么是正确的语法?

例如，这不起作用:

<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>

推荐答案

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

when you assign functions to variables without the var keyword they either overwrite the local variable of that name or the are added to the global namespace. (so your do_stuff is a global function, which is not what you want)

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

one way to do what you want is to explicitly give where you want your function to reside.

(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 中的所有函数都是对象，这意味着您可以为任意属性赋值.

This works because all functions in javascript are objects, which means you can assign values to any arbitrary property.

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

If you want to access the variables of other functions you can move the definitions inside of the other ones like:

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

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

but this will mean the function is only defined once you run the other function, and that each time you run the function it will overwrite the last definition.

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

Possibly a more ideal solution would be to have each function return an object containing the nested function like so:

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

相关文章