Чем более сложные системы мы создаем, тем острее становится необходимость использовать различные паттерны и повышать уровень абстракции. Все больше рутинной работы мы стараемся положить на плечи машины, что позволяет нам сконцентрироваться на главном. В сложной системе мы стараемся выделить некоторые сущности, которые имею определенный функционал. Каждая из сущностей решает свои задачи.

Если мы говорим о web, и о современном графическом интерфейсе пользователя на web-страницах (а для чего же еще JavaScript?), то здесь сплошь и рядом возникают ситуации, в которых, при наступлении некоторого события в одном компоненте интерфейса, должны обязательно выполниться некоторые действия в другом. И если это именно компоненты, которые выделены как отдельные сущности (объекты), то изящным решением для реализации реакции на наступление события в другом компоненте может оказаться Custom Events, которые реализованы в jQuery.

Попробую описать очень простой пример. Например у нас есть форма где возможно добавление персон посредством ввода имени и нажатии кнопки “Добавить”. И есть список персон, где должны отображаться эти персоны. И если форма добавления и список персон у нас это разные сущности, а не одна (например находятся на разных JS-вкладках одной страницы), то здесь на и пригодятся Custom Events.
Давайте рассмотрим реализацию алгоритма данного примера с использованием jQuery Custom Events. Отмечу, что в примере так же использован jQuery-plugin classy.js, который был описан ранее и служит для иммитации возможности описания классов в JavaScript. Поэтому для того, чтобы попробовать в действии данный пример, необходимо подключить файл classy.js (и конечно же не забудьте подключить перед ним и сам jQuery).

Javascript-код примера:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

$(document).ready(function(){
// Описываем классы компанентов с применением classy.js
var PersonForm = jQuery.Class.create({
	init: function(){
		this.button = $("#form button");
		this.field = $("#form input");
		var parentObject = this;
		this.button.click(function () {
			$(parentObject).trigger("addPersonEvent", 
				[parentObject.field.val(), 'second value']);
			parentObject.field.val('');
		});
	}
});
 
var PersonList = jQuery.Class.create({
	init: function(newPersonForm){
		this.list = $("#personList")[0];
		this.index = 0;
		var parentObject = this;
		$(newPersonForm).bind("addPersonEvent", 
		function(e, value1, value2) {
			var newOption   = document.createElement('option');
			newOption.value = parentObject.index++;
			newOption.appendChild(document.createTextNode(value1));
			parentObject.list.appendChild(newOption);
			console.log(value2); // Необходим FireBug для FireFox
		});
	}
});
 
// Создаем экземпляры классов
var formInstance = new PersonForm();
var listInstance = new PersonList(formInstance); // Ссылаемся на форму
 
});

HTML-код примера:

<select id="personList" multiple="" size="10" style="width:150px;"></select>
<div id="form">
	<input type="text" value="" />
	<button>Button</button>
</div>

Таким образом каждая сущность (объект класса) ведает только своими html-элементами, и не обращается напрямую к html-элементам другой сущности. Сущности общаются между собой при помощи Custom Events (событий). Конечно же это очень простой пример и в таком простом случае выделять две сущности возможно неправильно. Однако, я упростил пример для того, чтобы было проще понять код. Если эти сущности управляют десятком html-элементов и находятся в разных частях страницы, то показанный подход необходим.

Внимательный читатель заметит, что в событии передается два параметра. Один добавляется в список, а второй просто выводится в консоль FireBug (console.log(value2)). Фактически в примере второй аргумент не используется. Но я просто хотел проиллюстрировать способ, при котором возможна передача нескольких аргументов, если это будет необходимо.

Для тех, кто незнаком с console.log() (если такие еще остались), я скажу, что эта строка производит вывод в консоль браузера любой структуры, которая была передана как аргумент. Для того, чтобы объект console и сама js-консоль были доступны в FireFox вам необходимо расширение FireBug. Как сделать доступным console в других браузерах было написано в статье Отладка JavaScript в Opera, FireFox, IE и Safari.
Вот и вся наука. Жду ваших комментариев!