Содержание
Сегодня речь пойдет об объекте jQuery.Callbacks. Но, перед тем, как о нем поговорить, давайте вспомним, что такое коллбэк в JavaScript.
Коллбэк в JavaScript — это функция, которую мы передаем в качестве аргумента другой функции.
Для чего они нужны? Предположим, у вас есть HTML-разметка, в которой вы, используя CSS-селектор, определили какой-то элемент в DOM (в примере это селектор out).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Тест для понимания callback</title> </head> <body> <div id='out'> the place for text </div> </body> <script src="script.js"> </script> </html>
Напишем простую функцию, которая будет обращаться к этому элементу и публиковать вместо него элементы массива.
function myFunc(callback) {
const massiv = [3, 56, 7];
let element = document.querySelector("#out");
callback(element, massiv);
}
function outprint1(elem, arr) {
elem.innerHTML = arr.join('---');
}
myFunc(outprint1); Функция outprint1 — коллбэк, поскольку она передана в качестве аргумента в функцию обработки массива myFunc.
Результатом обработки такой функции станет вывод на HTML-странице элементов нашего массива, разделенных тремя дефисами. Аналогично мы можем создать функцию, которая будет содержать другие настройки, например, не дефисы, а пробелы, и тогда текст будет выводиться в указанный элемент уже с тремя звездочками:
function myFunc(tram) {
const massiv_znachenii = [117, 556, 709];
let element = document.querySelector("#out");
tram(element, massiv_znachenii);
}
function out1(element_massiva, array) {
element_massiva.innerHTML = array.join('---');
}
function out2(elem, arr) {
elem.innerHTML = arr.join('***');}
myFunc(out1); Указав в качестве аргумента уже другую функцию myFunc(out2), мы получим вывод элементов массива через три звездочки. Таким образом коллбэк как бы разделяет код и упрощает понимание выполняемых действий.
Функции, которые вызываются для реализации какого-то события — обычное дело в JavaScript. Примером такого обращения могут служить запросы AJAX. В этом случае появляется необходимость вызвать не одну функцию, а сразу список, который может состоять из десятков функций обратного вызова. Вот, например, как выглядит реализация паттерна Observer:
class Observable {
constructor() {
this.listeners = {};
}
// сделать подписку
on(e, callback) {
if (this.listeners[e] == undefined) {
this.listeners[e] = {};
this.listeners[e].eventProperty = {};
this.listeners[e].eventProperty.isOnOnce = false;
this.listeners[e].data = [];
}
this.listeners[e].data.push(callback);
}
// Осуществить единоразовую подписку
onOnce(e, callback) {
this.on(e, callback);
this.listeners[e].eventProperty.isOnOnce = true;
}
// Отменить подписку.
off(e, callback) {
this.listeners[e].data = this.listeners[e].data.
filter(function (listener) { return listener !== callback; });
}
// Сделать рассылку сообщени
emit(e, data) {
if (this.listeners[e] == undefined || this.listeners[e].data == undefined) {
return;
}
let itObj = this;
this.listeners[e].data.forEach(listener => {
if(itObj.listeners[e].eventProperty.isOnOnce) {
itObj.off(e, itObj.listeners[e].data[0]);
}
listener(data);
});
}
} Если вы ищете мощный способ управления списками коллбэков — это объект jQuery.Callbacks.
Объект jQuery.Callbacks можно найти внутри jQuery.Deferred и jQuery.ajax. Он создается вызовом конструктора jQuery.Callbacks(flags). Параметр flags влияет на опции работы объекта и является необязательным.
Для добавленного объекта callbacks можно указывать списки коллбэк-функций. Также можно выполнять различные манипуляции:
Для этого задействуются соответствующие методы объекта — add(), remove(), fire() и другие.
Применение коллбэков осуществляется по порядку очереди в группе.
Функция $.Callbacks() используется для обеспечения базовой функциональности jQuery $.ajax() и $.Deferred() компонентов. $.Callbacks() поддерживает набор методов, включая:
callbacks.add() — добавление обратного вызова или набора обратных вызовов в список коллбэков;callbacks.remove() — удаляет коллбэк или группу коллбэков из списка;callbacks.empty() — удаляет все обратные вызовы из списка;callbacks.disable() — метод для выключения списка обратного вызова или запрета выполнения с ним других действий;callbacks.disabled() — определяет, отключен ли список коллбэков;callbacks.fire() — вызывает все обратные вызовы с заданными аргументами;callbacks.fireWith() — вызов всех коллбэков в списке с заданным контекстом и аргументами.Ниже приведены две функции с именами myfunc1 и myfunc2:
function myfunc1( value ) {
console.log( value );
}
function myfunc2( value ) {
console.log( "myfunc2 says: " + value );
return false;
} Их можно поместить в список $.Callbacks, а затем вызывать следующим образом:
const callbacks = $.Callbacks(); callbacks.add( myfunc1 ); // Вывод: Highload! callbacks.fire( "Highload!" ); callbacks.add( myfunc2 ); // Вывод: Today!, myfunc2 says:Today! callbacks.fire( "Today!" );
В результате становится проще создавать сложные списки коллбэков, в которых входные значения могут быть легко переданы стольким функциям, скольким необходимо.
Другой поддерживаемый метод $.Callbacks— это .remove(), который позволяет удалить конкретный обратный вызов из списка обратных вызовов. Вот пример его использования:
const callbacks = $.Callbacks(); callbacks.add( myfunc1 ); // Вывод: Highload! callbacks.fire( "Highload!" ); callbacks.add( myfunc2 ); // Вывод: Today!, myfunc2 says: Today! callbacks.fire( "Today!" ); callbacks.remove( myfunc2 ); // Выводится только Highload.tech!, поскольку myfunc2 удалена. callbacks.fire( "Highload.tech!" );
Флаги можно применять, ставя между ними пробел. Перечислим их.
once — группа с коллбэками выполняется только один раз, а все последующие вызовы метода fire() ни к чему не приведут (по аналогии с объектом deferred):const callbacks = $.Callbacks( "once" ); callbacks.add( myfunc1 ); callbacks.fire( "Highload!" ); callbacks.add( myfunc2 ); callbacks.fire( "Today" ); callbacks.remove( myfunc2 ); callbacks.fire( "HighloadToday" ); //Вывод: Highload!
memory — этот флаг означает, что необходимо запоминать параметры последнего вызова метода fire() (и выполнения коллбэков из списка) и немедленно выполнять добавляемые коллбэки с соответствующими параметрами, если они добавляются уже после вызова метода fire() (как это сделано в объекте deferred):const callbacks = $.Callbacks( "memory" ); callbacks.add( myfunc1 ); callbacks.fire( "Highload!" ); callbacks.add( myfunc2 ); callbacks.fire( "Today" ); callbacks.remove( myfunc2 ); callbacks.fire( "HighloadToday" ); /* Вывод: Highload! myfunc2 says: Highload! Today myfunc2 says: Today HighloadToday */
unique — при указании данного флага каждый коллбэк может быть добавлен в список только один раз. Если попробовать повторно добавить коллбэк в список, это ни к чему не приведет:const callbacks = $.Callbacks( "unique" ); callbacks.add( myfunc1 ); callbacks.fire( "Highload!" ); callbacks.add( myfunc1 ); // Повторное добавление callbacks.add( myfunc2 ); callbacks.fire( "Today" ); callbacks.remove( myfunc2 ); callbacks.fire( "Highload!Today" ); /*Вывод: Highload! Today myfunc2 says: Today Highload!Today */
stopOnFalse — флаг говорит о том, что следует остановить выполнение коллбэков из списка, если какой-то из них вернул false, в пределах текущей сессии вызова fire(). Очередной вызов метода fire() открывает новую сессию запуска группы коллбэков. Они будут выполняться снова до тех пор, пока один из списка не вернет false либо пока не закончатся:function myfunc1 ( value ) {
console.log( value );
return false;
}
function myfunc2 ( value ) {
myfunc1 ( "myfunc2 says: " + value );
return false;
}
const callbacks = $.Callbacks( "stopOnFalse" );
callbacks.add( myfunc1 );
callbacks.fire( "Highload!" );
callbacks.add( myfunc2 );
callbacks.fire( "Today" );
callbacks.remove( myfunc2 );
callbacks.fire( "Highload!Today" );
/*
Вывод:
Highload!
Today
Highload!Today
*/ function myfunc1( value ) {
console.log( value );
return false;
}
function myfunc2( value ) {
myfunc1( "myfunc2 says: " + value );
return false;
}
const callbacks = $.Callbacks( "unique memory" );
callbacks.add( myfunc1 );
callbacks.fire( "Highload!" );
callbacks.add( myfunc1 ); // Повторное добавление
callbacks.add( myfunc2);
callbacks.fire( "Today" );
callbacks.add( myfunc2);
callbacks.fire( "ua" );
callbacks.remove( myfunc2);
callbacks.fire( "Highload!Today" );
/*
output:
Highload!
myfunc2 says: Highload!
Today
myfunc2 says:Today
ua
myfunc2 says: ua
Highload!Today
*/ Функции обратного вызова могут использоваться и при разработке различных анимационных эффектов. Обычно используется следующий синтаксис:
$ (селектор). Hide (скорость, обратный вызов);
Так, например, будет реализована задача, когда необходимо скрыть текст при нажатии на кнопку:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("Теперь текст спрятан");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>Highload.tech</p>
</body>
</html> Основной смысл функций JavaScript, который реализован в jQuery, состоит в том, чтобы обеспечить веб-разработчику удобное обращение к элементам документной модели DOM, к их атрибутам и значениям.
Надеемся, что теперь, используя объект jQuery.Callbacks в сложных проектах, вы по достоинству оцените его потенциал. Например, он будет уместен, если вы захотите сделать свой плагин для JQuery с большим количеством событий.
Если у вас остались вопросы по библиотеке jQuery или вы просто желаете продвинуться в ее изучении, рекомендуем вам посмотреть курс, в котором собрана вся теория относительно данного фреймворка:
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…
Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…
В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…
Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…
Дедлайн (от англ. deadline — «крайний срок») — это конечная дата стачи проекта или задачи…