問題描述

我的目標是能夠調用我的 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);

這篇關于如何調用嵌套在 JQuery 插件中的函數?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！