javascript - 如何在javascript中制作包装函数？

Question

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

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

我想对其中一些保存的cookie进行操作。
我可以像下面这样写:

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

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

但我认为使用像这样的 handle 会很好(只是看起来更漂亮和清晰):

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

有可能实现这个目标吗？

更新
em，也许我的例子有点含糊。
我的意思是，如果我可以像 JavaScript 中的 function statements 那样创建一个 defaultHandler 吗？只需将 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);
});