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);
    });
})

和第二部分

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);
});

Answer 2

我假设主要的可重用逻辑是设置事件。在这种情况下，我会使用setupHandEvents方法来完成所有无聊的工作，但是传递一种不同的方法来表示它的click处理程序。

function setupHandEvents (hand, handler){

    getArray(hand).forEach(function (elem) {
        $(elem).mouseover(function () {
            $(this).css({'top': '1em'});
        });
        $(elem).mouseout(function () {
            $(this).css({'top': '0em'});
        });
        $(elem).click(function (){   
            handler($(this).get(0));
        });
    });
}

setupHandEvents('my-hand', function (cardNode) {

    play(cardNode, time);

});

setupHandEvents('my-hand', function (cardNode) {

    validateCardAndAddForCollection(checkNumber, cardNode, time);

});

<强> 更新

您已经评论了另一个答案，即您将这些重复使用的代码片段包含在另一个函数中（一个从其他位置提供变量checkNumber和time的函数。以下是您可以将我的setupHandEvents方法与您在该评论中发布的代码一起使用：

var func1 = function(time){

    setupHandEvents('my-hand', function (cardNode) {
        play(cardNode, time);
    });
}

var func2 = function(checkNumber, time){

    setupHandEvents('my-hand', function (cardNode) {
        validateCardAndAddForCollection(checkNumber, cardNode, time);
    });
}

使用不同事件方法重用代码

1

2

2 个答案: