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
}

我有很多类似的其他案例。我能想到的一种方法是编写函数？我不确定我是否还不熟悉这种语言

对不起，我是each（）函数的索引，它是$（'。child'）的大小，而r和c只是包含'的网格的'rows'和'columns'。儿童'。 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

不知道我，r和c是什么，重构非常困难。这可以压缩为将这些数字作为变量传递的函数 - 因为最终代码的所有其他部分都是相同的。

Answer 3

我认为在每个案例陈述中使用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重构，这也可以合并。

有没有办法重构这个javascript / jquery？

4 个答案: