有没有办法重构这个 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只是'行'以及包含“.child”的网格的“列”。 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 重构，这也可以合并。