不同事件方法的代码重用答案

【问题标题】：Code reuse with different event methods不同事件方法的代码重用
【发布时间】：2016-03-12 18:02:29
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery reusability

【解决方案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);
});

【讨论】：

也许getCardNode 是一个误导性的名称，因为它并没有真正返回任何东西，而且它的主要目的本质上是引导特定元素的事件。
@shennan 你说得对；我没有注意到这是一个循环。总的来说，代码的设计可以大大改进。
我可能忘了告诉你，两段代码嵌入在两个不同的函数中，看起来像 var func1 = function(time){ // 一堆代码 //重复一段代码 } var func2 = function(checkNumber, time){ // 又一堆代码 //重复一段代码 }
@ԱրաՄարտիրոսյան 这仍然可以正常工作——只需在每个函数中调用 handleCards()。
@Purag 谢谢。你在哪里工作。我投票支持你的答案，但它没有改变，因为我到目前为止还没有声誉。

【解决方案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。这是您将如何使用我的 @987654326 @ 方法与您在该评论中发布的代码：

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

【讨论】：

感谢您的回复，但这对我不起作用。当我将鼠标悬停在手牌上时，手牌甚至都不会移动。我想请您注意 checkNumber 和 time 参数，它们作为参数从外部传递给包含这两段代码的函数
@ԱրաՄարտիրոսյան 您能否更新您的代码，为这些功能提供更多上下文。如果你现在这样做，我可以建议你如何使用我给你的东西，或者如果需要改变它。
@ԱրաՄարտիրոսյան 如果答案解决了您的问题，请标记为正确。