Javascript 自定义jquery插件中的多个函数和回调？

好吧，我不确定我是否以正确的方式进行了这件事，但接下来

我正在编写一个自定义jQuery插件，以提供带有动画的下拉菜单功能（作为一个学习练习，请不要“为什么不使用superduperwonderplugin-x”）

我希望能够根据用户选项（如淡入、滑动、下降等）以不同的方式设置菜单动画。目前，每个不同的动画都由插件文件中的一个单独函数处理，但我不确定如何处理回调函数（将其传递回）

--即，动画仅发生在对象堆栈中的最后一个元素上

这是我的密码：

/**
 * Grizzly's Menuifier
 * 
 * @author  Chris.Leaper
 * @version a1.0
 */
(function($){
    $.fn.gmenu = function(options) {

        /* Transitions:
            - fade >> fadeIn / fadeOut
            - slide >> slideDown / slideUp
            - drop >> (different to above?)
            - bounce >> (custom config transition=? and easing=bounce)
            - stretch >> (custom config transition=? and easing=elastic)
            - fold >> (custom) drop menu @ half width then 'fold' out to full menu width
        */

        // Set the plugin default options:
        var defaults = {
            levels: '1',
            fit: 'auto',
            easing: 'linear',
            transition: 'slide',
            speed: 500
        };

        options = $.extend(defaults, options); // Merge the user options with the plugin defaults

        return this.each(function() {
            var $this = $(this);
            var opt = options;
            var container;
            var ul;

            // Setup the container elements (parent DIV/NAV and UL)!
            if( $this.is('ul') ) container = $(this).parent();
            else container = $(this);

            console.log('Container: ' + container.get(0).tagName + ' id=#' + container.attr('id') + ' class=' + container.attr('class'));

            ul = container.children('ul:first-child');

            console.log('UL: ' + ul);

            // Set the UL's position to relative:
            if($(ul).css('position') != 'relative') $(ul).css('position', 'relative');

            var offset;
            var menus = ul.children('li:has(ul)');

            console.log('List Item: ' + menus);

            menus.each(function(index, menu) {
                $menu = $(menu);

                console.log('Menu: ' + $menu);

                // Set the menu LI's position to relative (contains the absolutely positioned child UL!)
                if($menu.css('position') != 'relative') $menu.css('position', 'relative');

                // Get the menu LI's position relative to the document (it's offset)
                // -- This is only needed when positioning non-child elements
                // (i.e. ID linked menu>submenu relationships as may be used for a separated DIV based menu!!)
//              offset = menu.offest();

                // Position the submenu according to it's parent
                var submenu = $menu.children('ul');

                console.log('Submenu: ' + submenu.get(0).tagName + ' id=#' + submenu.attr('id') + ' class=' + submenu.attr('class'));

                setPosition(submenu, $menu.height());

                switch(opt.transition) {
                    case 'bounce':
                        setSMBounce(menu, opt);
                        break;
                    case 'fade':
                        setSMFade(menu, opt);
                        break;
                    case 'fold':
                        setSMFold(menu, opt);
                        break;
                    case 'stretch':
                        setSMStretch(menu, opt);
                        break;
                    case 'slide':
                    default:
                        menu = setSMSlide(menu, opt);
                }
            });

            debug(this);
        });
    };
})(jQuery);

function setPosition(submenu, height) {
    $(submenu).css({
        left: 0,
        position: 'absolute',
        top: height
    }).hide();
}

function setSMSlide(menu, opt) {
    $menu = $(menu);

    console.log('SM Slide: ' + $menu.get(0));

    $menu.first('a').mouseenter(function() {
        console.log('Start SlideDown');
        $menu.stop(true, true).slideDown(opt.speed, opt.easing);
        console.log('Stop SlideDown');
    });

    $menu.first('a').mouseleave(function() {
        console.log('Start SlideUp');
        $menu.stop(true, true).slideUp(opt.speed, opt.easing);
        console.log('Stop SlideUp');
    });
}

我认为我应该使用一种（相同的）基于名称空间的方法来定义我的单独函数（object literal还是什么？），但我不确定这意味着什么，也不知道如何去做

---

有人能帮我吗？

要封装函数setPosition和setSMSlide（在您的示例中），只需在插件函数中定义它们（好的地方是在定义默认变量之后。它看起来像这样：

var defaults = {
        levels: '1',
        fit: 'auto',
        easing: 'linear',
        transition: 'slide',
        speed: 500
    },
    setPosition = function(submenu, height) {...},
    setSMSlide = function(menu, opt) {...};

---

由于Javascript中作用域的工作方式，您的setPosition和setSMSlide函数仍然可以从gmenu声明内部访问。

要封装函数setPosition和setSMSlide（在您的示例中），只需在插件函数中定义它们（好的地方是在定义默认变量之后。它看起来像：

var defaults = {
        levels: '1',
        fit: 'auto',
        easing: 'linear',
        transition: 'slide',
        speed: 500
    },
    setPosition = function(submenu, height) {...},
    setSMSlide = function(menu, opt) {...};

---

由于Javascript中作用域的工作方式，您的setPosition和SetMslide函数仍然可以从gmenu声明内部访问。

谢谢，我将尝试一下。这会使它们可以作为“$（选择器）.gmenu.setPosition（）；”访问吗？不会。因为您从函数返回的内容（gmenu函数）是一个jQuery对象——这通常是一件好事，也是一种支持链接的常见设计模式。当然，有很多插件由于很多原因不遵循这一规则。我认为最好您只需浏览两个插件的源代码，看看它们是如何组织的。这就是Javascript的优点-您可以查看和反向工程每个脚本：）谢谢，我会尝试一下。这会使它们可以作为“$（选择器）.gmenu.setPosition（）；”访问吗？不会。因为您从函数返回的内容（gmenu一个）是一个jQuery对象——这通常是一件好事，也是一种支持链接的常见设计模式。当然，有很多插件由于很多原因不遵循这一规则。我认为最好您只需浏览两个插件的源代码，看看它们是如何组织的。这就是Javascript的优点-您可以查看并反向工程每个脚本：）