Как вызвать функции, вложенные в плагин 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);