Question

我开发了一个jQuery插件，它可以显示和隐藏两个有序动画的内容。我对插件在单个元素上使用时的行为感到满意，但是当在插件调用中使用相同类名的页面上有两个元素时，我会返回四个回调。看起来这个插件不太正确，我会很感激任何提示或帮助可以让我更接近完成这个插件。

我热衷于提高我的代码质量，也非常感谢任何一般反馈。

可以在此处找到该插件的工作示例：http://jsfiddle.net/nijk/sVu7h/

插件代码如下：

(function($){
$.fn.showHide = function(method, duration, options, callback){
    //console.log(method, duration, options, callback);
    var animating = false;
    var defaults = {
        $elem: this,
        easing: "swing"
    }
    var _sh = this;
    var init = function(){ 
            _sh.method = method;
            if("show" !== _sh.method && "hide" !== _sh.method){
                _sh.method = "show";
            }
            if( duration < 0 || (typeof(duration) == "string" && ("slow" !== duration && "normal" !== duration && "fast" !== duration) ) ){
                duration = "normal";
            }
            console.log( duration, typeof(duration) );
            if(typeof(options) == "function"){
                callback = options;
                options = {};
            }
            _sh.config = $.extend({}, defaults, options);
        if(!animating){
            //return _sh.each(function(index){
                //console.log("found element number: " + (index + 1));
                eval(_sh.method)();            
            //});
        }
    }
    var show = function(){
        animating = true;
        _sh.config.$elem.wrap('<div class="show-hide"/>').parent().hide();
        _sh.config.$elem.css({"opacity":0, "display":"block"});
        console.log("element height:",  _sh.config.$elem.parent().outerHeight());
        _sh.config.$elem.parent().slideDown(duration, _sh.config.easing, function(){
            _sh.config.$elem.animate({"opacity": 1}, duration, _sh.config.easing, function(){
                    console.log("show final cleanup called");
                    _sh.config.$elem.addClass("visible").unwrap();
                    $.isFunction(callback) && callback();
                    animating = false;
            });
        });
    };
    var hide = function(){
        animating = true;
        _sh.config.$elem.wrap('<div class="show-hide"/>');
        _sh.config.$elem.animate({"opacity":0}, duration, _sh.config.easing, function(){
            _sh.config.$elem.slideUp(duration, _sh.config.easing, function(){
                console.log("hide final cleanup called");
                _sh.config.$elem.removeClass("visible").hide().unwrap();
                $.isFunction(callback) && callback();
                animating = false;
            });
        });
    }
    init();
    return this;
}
})(jQuery);

@ david.mchonechase：非常感谢您的解释和代码示例。

我已经对回调进行了一些调整，以便返回'this'的正确上下文。任何改进代码的建议都将不胜感激。

此处更新的工作代码：http://jsfiddle.net/nijk/sVu7h/，如下所示：

(function($){
  $.fn.showHide = function(method, duration, options, callback){
    var animating = false;
    var defaults = { easing: "swing" };
    var _sh = this;
    _sh.method = show;

    if("hide" === method){
        _sh.method = hide;
    }
    if( duration < 0 || (typeof(duration) == "string" && ("slow" !== duration && "normal" !== duration && "fast" !== duration) ) ){
        duration = "normal";
    }
    if(typeof(options) == "function"){
        callback = options;
        options = {};
    }
    _sh.config = $.extend({}, defaults, options);

    function show(elem){
        animating = true;
        elem.wrap('<div class="show-hide"/>').parent().hide();
        elem.css({"opacity":0, "display":"block"});
        elem.parent().slideDown(duration, _sh.config.easing, function(){
            elem.animate({"opacity": 1}, duration, _sh.config.easing, function(){
                    elem.addClass("visible").unwrap();
                    $.isFunction(callback) && callback.call(this);
                    animating = false;
            });
        });
    };
    function hide(elem){
        animating = true;
        elem.wrap('<div class="show-hide"/>');
        elem.animate({"opacity":0}, duration, _sh.config.easing, function(){
            elem.slideUp(duration, _sh.config.easing, function(){
                elem.removeClass("visible").hide().unwrap();
                    $.isFunction(callback) && callback.call(this);
                    animating = false;
            });
        });
    };

    if(!animating){
        // loop through each element returned by jQuery selector
        return this.each(function(){
            _sh.method($(this));
        });
    }
  }
})(jQuery);

Answer 1

问题是全局变量和parent（）调用的混合。 _sh。$ elem变量包含两个元素（每个jQuery选择器结果一个）。 show函数中的_sh.config。$ elem.parent（）。slideDown调用被调用两次。完成后，它会为每个“showMe”元素运行_sh.config。$ elem.animate一次。因此，parent（）。slideDown被调用两次，然后调用_sh.config。$ elem.animate两次。

我经常尝试在jQuery插件中避免使用show和hide等函数的全局变量，但关键部分是元素。（但动画全局变量是有意义的。）

我认为这样的事情会起作用：

(function($){
    $.fn.showHide = function(method, duration, options, callback){
        //console.log(method, duration, options, callback);
        var animating = false;
        var defaults = {
            //$elem: this,
            easing: "swing"
        }
        var _sh = this;
        var init = function(){ 
            var methodFn = show; // reference actual function instead of string, since eval is evil (usually)
            if("hide" === method){
                methodFn = hide;
            }
            if( duration < 0 || (typeof(duration) == "string" && ("slow" !== duration && "normal" !== duration && "fast" !== duration) ) ){
                duration = "normal";
            }
            console.log( duration, typeof(duration) );
            if(typeof(options) == "function"){
                callback = options;
                options = {};
            }
            _sh.config = $.extend({}, defaults, options);
            if(!animating){
                // loop through each element returned by jQuery selector
                _sh.each(function(){ 
                    methodFn($(this)); // pass the single element to the show or hide functions
                });
            }
        }
        var show = function(elem){
            animating = true;
            elem.wrap('<div class="show-hide"/>').parent().hide();
            elem.css({"opacity":0, "display":"block"});
            console.log("element height:",  elem.parent().outerHeight());
            elem.parent().slideDown(duration, _sh.config.easing, function(){
                elem.animate({"opacity": 1}, duration, _sh.config.easing, function(){
                        console.log("show final cleanup called");
                        elem.addClass("visible").unwrap();
                        $.isFunction(callback) && callback();
                        animating = false;
                });
            });
        };
        var hide = function(elem){
            animating = true;
            elem.wrap('<div class="show-hide"/>');
            elem.animate({"opacity":0}, duration, _sh.config.easing, function(){
                elem.slideUp(duration, _sh.config.easing, function(){
                    console.log("hide final cleanup called");
                    elem.removeClass("visible").hide().unwrap();
                    $.isFunction(callback) && callback();
                    animating = false;
                });
            });
        }

        init();
        return this;
    }
})(jQuery);

jQuery插件 - 返回的回调太多

1 个答案: