Как сделать функцию обертки в javascript?

У меня много обработчиков кликов, как показано ниже:

$(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'
 ....
})

Но я думаю, было бы неплохо использовать ручку вроде (просто выглядите более красивой и понятной):

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

Можно ли это достичь?

Обновить em, может быть, мой пример немного неоднозначен. Я имею в виду, что если я могу сделать defaultHandler как это делает function statement в javascript? Просто function(e){...} по defaultHandler(e){...}

3 ответа

Короткая беседка: Нет, нет способа сказать это 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 с именем, которое оно запоминает. Затем он возвращает новую функцию, которая затем используется как обработчик события. При вызове позже ваш обратный вызов logger будет иметь доступ к 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);
});


Я не уверен на 100%, я понимаю вашу проблему, но, возможно, вы ищете что-то вроде этого:

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

Затем используйте его как

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


defaultHandle(e){...} - это неправильный синтаксис, вы не можете.

Используйте что-то вроде следующего:

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

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

}));

licensed under cc by-sa 3.0 with attribution.