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

Posted 2023-02-22

【中文标题】如何调用嵌套在 JQuery 插件中的函数？

【英文标题】：How to call functions that are nested inside a JQuery Plugin?

【发布时间】：2010-11-05 17:42:55

【问题描述】：

我的目标是能够调用我的 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>

【参考方案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);

【讨论】：

我真的不明白为什么会这样。我认为 $.fn.foo 可以是具有属性 do_stuff 的函数或对象，但在您的示例中两者都是。这在 JavaScript 中是可能的吗？你能给我一个指针来阅读这个功能吗？还是我这里有什么问题？

感谢您的示例，它有效。我的插件已经完成了。您的示例与我的插件的结构不匹配。在我的插件中，“do_stuff”在“foo”内，“do_other_stuff”在“do_stuff”内。如何使用该嵌套结构访问“做其他事情”？或者，我如何使用您的示例，但让 do_stuff 从 foo 访问变量（并让 do_other_stuff 从 do_stuff 访问变量）？

感谢 Cobbal，我知道如何将您的示例与我的函数结构一起使用。效果很好！我只需要对所有嵌套函数使用 $.fn.foo.[function_name]，无论它们的级别如何。

以第一个解决方案为例，如何将 do_other_stuff 调用到 do_stuff 中？？