Question

我有很多点击处理程序，如下所示：

$(document).on('click','.xxxBtn', function(e){
    ....
})

我想在其中一些饼干中保存饼干我可以写如下：

function defaultHandler (e, callback) {
    callback(e);
    doSomeJobs();
}

$(document).on('click','.xxxBtn', defaultHandler(e,function(e){
    `diferent code in each Btn`
    ....
})

但我认为使用像（看起来更漂亮和清晰）这样的句柄会很好：

$(document).on('click','.xxxBtn', defaultHandler(e){
    `diferent code in each Btn`
    ....
})

有可能实现这个目标吗？

更新
em，也许我的例子有点含糊不清。我的意思是，如果我可以像defaultHandler那样在javascript中创建function statement？只需function(e){...}到defaultHandler(e){...}

Answer 1

简短回答：
不，没有办法告诉它defaultHandler(e){...}

更长的答案：

可以实现与它非常相似的东西。您需要的是高阶函数，它是返回函数的函数。是的，这样的事情在JS中是可能的，甚至是编写干净，简洁的代码所必需的。

首先，让我们从一个简单的例子开始。您希望为所有内容共享完全相同的处理程序

var logArgs = function (e) {
    console.log(arguments);
}

$(document).on('click', '.btn', logArgs);

您可以根据需要随时使用该功能作为事件处理程序。它总能奏效。但是，我们假设您需要一些更具体的逻辑。也许你想通过总是在某个字符串前面来识别输出。

var namedLogger = function (name) {
    return function (e) {
        console.log(name, arguments);
    }
};

$(document).on('click', '.btn', namedLogger('firstButton'));
$(document).on('click', '.btn2', namedLogger('secondButton'));

如您所见，我们使用名称来调用函数namedLogger，它会记住该名称。然后它返回一个新函数，然后将其用作事件处理程序。稍后调用时，您的记录器回调将通过闭包范围访问name并在参数之前记录它。

你可以对这种模式发疯，实际上是鼓励它。这是在JS中编写可重用事件处理程序代码的最佳方式。

使这与您的用例更相关：

var cookieSetter = function (eventHandler) {
    var setCookie = function (key, value) {
        document.cookie = key + '=' + value + ';';
    };

    return function (e) {
        setCookie('whatever', e.something);
        eventHandler(e);
    };
};

$(document).on('click', '.btn', cookieSetter(function (e) {
    console.log('Event triggered', e);
});

Answer 2

我不是100％确定我理解你的问题，但也许你正在寻找这样的事情：

function defaultHandler(callback) {
    return function(e) {
        callback(e);
        doSomeJobs();
    }
}

然后像

一样使用它

$(document).on('click', '.xxxBtn', defaultHandler(function(e) {});

Answer 3

defaultHandle(e){...}语法不正确，您可以

使用类似的内容：

function getHandler(flag, next) {
 if (flag) 'store cookies';
 return next;
}

$(document).on('click','.xxxBtn', getHandler(true, function(e){

}));

如何在javascript中创建包装函数？

3 个答案: