javascript - 不同事件方法的代码重用

Question

我的项目的两个不同功能中有两段相似的代码 我想摆脱重复的代码。我怎样才能做到这一点？

1:

getArray("my-hand").forEach(function(elem){
    $(elem).mouseover(function(){
        $(this).css({'top': '1em'});
    });
    $(elem).mouseout(function(){
        $(this).css({'top': '0em'});
    });
    $(elem).click(function(){   
        var cardNode = $(this).get(0);
        //some jquery animation
        play(cardNode,time);
    });
})

和第二 block

2:

getArray("my-hand").forEach(function(elem){
    $(elem).mouseover(function(){
        $(this).css({'top': '1em'});
    });
    $(elem).mouseout(function(){
        $(this).css({'top': '0em'});
    });
    $(elem).click(function(){   
        var cardNode = $(this).get(0);
        //a function with another jquery animation
        validateCardAndAddForCollection(checkNumber,cardNode,time);
    });
})

Answer 1

一种方法是将其放入函数中，并将执行所需代码的回调作为参数传递给该函数:

function handleCards (cb) {
    getArray("my-hand").forEach(function(elem){
        $(elem).mouseover(function(){
            $(this).css({'top': '1em'});
        });
        $(elem).mouseout(function(){
            $(this).css({'top': '0em'});
        });
        $(elem).click(function(){   
            var cardNode = $(this).get(0);
            //some jquery animation

            cb(cardNode);
        });
    });
}

handleCards(function (cardNode) {
    play(cardNode, time);
});

handleCards(function (cardNode) {
    validateCardAndAddForCollection(checkNumber,cardNode,time);
});