如何调用嵌套在JQuery插件内的函数？ [英] How to call functions that are nested inside a JQuery Plugin?

问题描述

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

推荐答案

覆盖该名称的局部变量或将其添加到全局命名空间。 （所以你的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);

这篇关于如何调用嵌套在JQuery插件内的函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！