不同事件方法的代码重用

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

不同事件方法的代码重用

Code reuse with different event methods

javascript

jquery

reusability

1:

2: