Публикация в группе: Плагин WP-Recall - Личный кабинет на WordPress

Категории группы: Полезное

Не так давно, всего лишь с выходом 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-коду гибкость и расширяемость, которая ранее была недоступна. Добавляйте в свой код указанные фильтры и хуки, чтобы будущие разработчики, которые захотят изменить или дополнить ваш код могли сказать вам "спасибо".

2

Автор публикации

не в сети 3 часа

Андрей CS

12K
занят
Комментарии: 2724Публикации: 492Регистрация: 30-11--0001Продаж/Покупок: 0/0