Не так давно, всего лишь с выходом WP-Recall 15.3, было мимоходом упомянуто о появлении нового функционала хуков и фильтров в javascript коде плагина. Постараюсь в этой статье более подробно обрисовать данный функционал и описать порядок его применения.
Те, кто работают с WordPress, скорее всего, знают о функционале хуков и фильтров, о порядке работы с функциями:
- do_action
- add_action
- apply_filters
- add_filter
Настоящему WordPress-разработчику стыдно не знать об этих функциях, они широко используются в коде ядра, плагинов и шаблонов этой CMS. Я считаю, что появление и широкое применение именно этого функционала во многом определила стремительное развитие, гибкость и популярность WordPress.
Все отлично, если не обращать внимание на то, что этот функционал можно использовать только в php-коде, на стороне сервера. Почему то клиентская часть, javascript-код, были обделены подобным мощным функционалом. Можно найти множество ситуаций в которых применение php-функции do_action или apply_filters внутри js-функций было бы удобным и оправданным. Чтобы любой сторонний разработчик лишь взглянув на код нашей js-функции мог обратиться к нашей зацепке, получить и изменить массив данных через свою функцию или прицепить срабатывание своей функции в момент срабатывания нашей. Ведь javascript-код можно также легко сделать гибким и расширяемым, как php-код написанный для WordPress!
Именно для реализации описанных выше потребностей и возможностей разработки в код плагина WP-Recall были добавлены легкие аналоги упомянутых php-функций, но только для javascript:
- rcl_do_action
- rcl_add_action
- rcl_apply_filters
- rcl_add_filter
Итак, рассмотрим функционал регистрации и применения своих хуков в javascript-коде.
Принцип действия хука (зацепки) следующий: при выполнении кода, в момент выполнения функции регистрации хука, функционал плагина получает наименование всех сторонних функций, которые обращаются к этому хуку и выполняет их.
Новый хук регистрируется с помощью функции:
rcl_do_action(action_name, args);
первым аргументом принимает наименование регистрируемого хука, а вторым - массив аргументов или строка.
Функция регистрации обращения к существующему хуку:
rcl_add_action(action_name, function_name);
первым аргументом принимается указание нужного существующего экшна, а вторым наименование функции, которая будет вызываться при срабатывании указанного хука.
Рассмотрим небольшой пример. Допустим мы написали свою js-функцию my_custom_function с произвольным содержимым, в которой зарегистрируем новый хук, к которому смогут обращаться другие функции:
function my_custom_function(){
//произвольный код
var data = {
key1: 'value1',
key2: 'value2'
};
rcl_do_action('my_action',data);
//произвольный код
}
Внутри функции мы создали некий объект data с произвольным содержимым и передали его в регистрируемых хук my_action. Теперь разработчик стороннего функционала сможет легко подключить свою функцию к имеющемуся хуку, получить передаваемый хуком объект data и нужным образом обработать их:
rcl_add_action('my_action','any_custom_function');
function any_custom_function(data){
console.log(data);
}
Функция any_custom_function сработает в момент регистрации хука 'my_action' через функцию rcl_do_action и получить объект данных data, который был передан при регистрации хука.
Таким образом, мы можем подключить срабатывание любой нашей js-функции в момент регистрации хука, тем самым расширяя функционал функции my_custom_function, без ее непосредственной правки.
Теперь рассмотрим возможности фильтрации контента внутри javascript.
Функция регистрации нового фильтра:
rcl_apply_filters(filter_name, args);
первым аргументом передается наименование регистрируемого фильтра, вторым - массим передаваемых аргументов или строка.
Функция регистрации обращения к существующему фильтру:
rcl_add_filter(filter_name, function_name);
первый аргумент принимает наименование существующего фильтра, второй - наименование функции, осуществляющей фильтрацию передаваемого контента.
Рассмотрим применение этих функций на простом примере.
Возьмем уже написанную выше функцию my_custom_function и зарегистрируем внутри нее фильтр, через который будем прогонять созданный объект data:
function my_custom_function(){
//произвольный код
var data = {
key1: 'value1',
key2: 'value2'
};
var newData = rcl_apply_filters('my_filter',data);
rcl_do_action('my_action',newData);
//произвольный код
}
Обратите внимание, в строке
data = rcl_apply_filters('my_filter',data);
мы регистрируем фильтр 'my_filter', передаем в него созданный объект data и получаем его обратно. Теперь сторонний разработчик может обратиться к нашему фильтру, получить переданный объект для изменения, изменить его и вернуть новый вариант объекта с уже измененными данными:
rcl_add_filter('my_filter','any_custom_edit_function');
function any_custom_edit_function(data){
//дополним объект data новыми данными
data.key3 = 'value3';
return data;
}
Теперь, пройдя через фильтр 'my_filter', объект data будет получен внутри функции any_custom_edit_function и дополнен новыми данными, а затем возвращен обратно в фильтр уже измененным. Новые данные полученные из фильтра будут сохранены в новый объект newData, который затем также будет передан в хук 'my_action'.
Данный функционал позволяет добавлять вашему javascript-коду гибкость и расширяемость, которая ранее была недоступна. Добавляйте в свой код указанные фильтры и хуки, чтобы будущие разработчики, которые захотят изменить или дополнить ваш код могли сказать вам "спасибо".
Автор публикации
Комментариев (0)