不同事件方法的代码重用

Code reuse with different event methods

本文关键字：代码 方法 事件      更新时间：2023-09-26

我的项目的两个不同函数中有两段类似的代码我想摆脱重复的代码。我该怎么做？

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

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

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

我假设主要的可重用逻辑是设置事件。在这种情况下，我会使用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);
    });
}
相关文章：