有没有办法重构这个 javascript/jquery？ [关闭]

Question

switch (options.effect) {

case 'h-blinds-fadein':
    $('.child').each(function(i) {
        $(this).stop().css({
            opacity: 0
        }).delay(100 * i).animate({
            'opacity': 1
        }, {
            duration: options.speed,
            complete: (i !== r * c - 1) ||
            function() {
                $(this).parent().replaceWith(prev);
                options.cp.bind('click', {
                    effect: options.effect
                }, options.ch);
            }
        });
    });

    break;

case 'h-blinds-fadein-reverse':
    $('.child').each(function(i) {
        $(this).stop().css({
            opacity: 0
        }).delay(100 * (r * c - i)).animate({
            'opacity': 1
        }, {
            duration: options.speed,
            complete: (i !== 0) ||
            function() {
                $(this).parent().replaceWith(prev);
                options.cp.bind('click', {
                    effect: options.effect
                }, options.ch);
            }
        });
    });

    break;

    ....more cases
}

我还有很多类似的案例。我能想到的一种方法是编写函数？我不确定我对这门语言还是很陌生

对不起，i 是 each() 函数的索引，它是 $('.child') 的大小，而 r 和 c 只是包含 '.孩子'。 r 和 c 可以是任意数字，例如r=5 c=5

Answer 1

而不是使用开关，将特定于案例的数据存储在哈希中。

然后运行主代码块并从哈希中提取任何特定的效果类型。

function doit(e) {
    var hash = {
        'h-blinds-fadein': {
            delay: function(i) { return i; },
            complete: function(i) { return (i !== r * c - 1); }
        },
        'h-blinds-fadein-reverse': {
            delay: function(i) { return (r * c - i); },
            complete: function(i) { return i !== 0; }
        }
    }

    $('.child').each(function(i) {
        $(this).stop().css({
            opacity: 0
        }).delay(100 * hash[e].delay(i)).animate({
            'opacity': 1
        }, {
            duration: options.speed,
            complete: hash[e].complete(i) ||
            function() {
                $(this).parent().replaceWith(prev);
                options.cp.bind('click', {
                    effect: options.effect
                }, options.ch);
            }
        });
    });
}

doit(options.effect);

Answer 2

在不知道 i、r 和 c 是什么的情况下，很难重构。这可以浓缩为一个将这些数字作为变量传递的函数——因为最终代码的所有其他部分都是相同的。

Answer 3

我认为在每个 case 语句中使用 function 是首先要做的事情。

case 'h-blinds-fadein':
    hBlindsFadeIn(options);    
    break;

...

function hBlindsFadeIn(options){
       $('.child').each(function(i) {
            $(this).stop().css({
                opacity: 0
            }).delay(100 * i).animate({
                'opacity': 1
            }, {
                duration: options.speed,
                complete: (i !== r * c - 1) ||
                function() {
                    $(this).parent().replaceWith(prev);
                    options.cp.bind('click', {
                        effect: options.effect
                    }, options.ch);
                }
            });
        });
}

显然您的功能需要在开关之外。

Answer 4

我所能建议的是将实际效果重构为单独的方法，这将使您的 switch 语句更具可读性，即：

switch (options.effect) {

case 'h-blinds-fadein':
    h-blinds-fadein();
    break;

case 'h-blinds-fadein-reverse':
    h-blinds-fadein-reverse();
    break;

    ....more cases
}

function h-blinds-fadein() {
    $('.child').each(function(i) {
        $(this).stop().css({
            opacity: 0
        }).delay(100 * i).animate({
            'opacity': 1
        }, {
            duration: options.speed,
            complete: (i !== r * c - 1) ||
            function() {
                $(this).parent().replaceWith(prev);
                options.cp.bind('click', {
                    effect: options.effect
                }, options.ch);
            }
        });
    });
}

function h-blinds-fadein-reverse() {
    $('.child').each(function(i) {
        $(this).stop().css({
            opacity: 0
        }).delay(100 * (r * c - i)).animate({
            'opacity': 1
        }, {
            duration: options.speed,
            complete: (i !== 0) ||
            function() {
                $(this).parent().replaceWith(prev);
                options.cp.bind('click', {
                    effect: options.effect
                }, options.ch);
            }
        });
    });
}

或者，您可以尝试使用重构函数的 eval 函数：

eval(options.effect+"();");

---- 编辑----

喜欢 Raynos 重构，这个也可以合并。