dojo.connect

Получение ссылки на узел дерева DOM, несомненно, ничем не интерес но, поэтому давайте рассмотрим чтонибудь более интересное, например подключение события пользовательского интерфейса, такого как перемещение указателя мыши, к узлу с помощью функции dojo.con-
nect – механизма инструментального набора для динамического добавления и удаления этих типов событий. Сигнатура функции может показаться сложной на первый взгляд, но функцией в действительности совсем просто пользоваться. Взгляните:
connect(/*Object|null*/ obj,
/*String*/ event,
/*Object|null*/ context,
/*String|Function*/ method) // Возвращает дескриптор соединения

Чтобы опробовать действие функции connect, выполните приведенный далее программный код в консоли Firebug, а затем переместите указатель мыши на текст предложения, содержащегося в теге SPAN, чтобы убедиться, что обработка события mouseover настроена должным образом. (Возможно, вам придется щелкнуть на ярлыке с крышечкой в правом нижнем углу, чтобы переключить командную строку в многострочный режим ввода.)
var handle = dojo.connect(
dojo.byId("s1"), //контекст
"onmouseover", //событие
null, //контекст
function(evt) {console.log("mouseover event", evt);} //обработчик события
);

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

Как оказывается, функция dojo.connect, как и dojo.byId, проверяет многие вещи, для того чтобы работа с ней была проще, чем это могло сначала показаться.


Фактически любые аргументы, которые допускают значение null, вообще могут быть опущены. Вследствие этого предыдущий фрагмент можно переписать, как показано ниже, сделав его немного более удобочитаемым:
var handle = dojo.connect(
dojo.byId("s1"), //контекст
"onmouseover", //событие
function(evt) {console.log("mouseover event",evt);} //обработчик события
);

Операция отключения функции, предназначенной для обработки события DOM, выполняется еще проще, и она имеет большое значение для предотвращения утечек памяти, если в странице приходится делать большое число подключений и отключений. Для этого достаточно вызвать функцию dojo.disconnect, передав ей дескриптор соединения, который был сохранен ранее, а инструментарий Dojo сам позаботится обо всем остальном:
dojo.disconnect(handle);

Несмотря на всю простоту примера, функция dojo.connect демонстрирует ключевой принцип философии Dojo: перемещение из пункта A в пункт B всегда должно быть максимально простым. Уверен, если вы близко знакомы с языком JavaScript, вы могли бы и сами пройти все этапы установки, поддержания и отсоединения обработчика события. Однако при этом вам пришлось бы использовать шаблон, загромождающий программный код, и давайте не будем забывать: каждую строку программного кода, которую вы напишете, вам же и придется сопровождать.


Опытные вебразработчики, которых немало и среди нас, предпочитающие не усложнять задачу, оценят преимущества использования функций dojo.connect и dojo.disconnect.

Инструментальный набор Dojo не делает ничего такого, что нельзя было бы сделать на чистом JavaScript, то же самое можно сказать и о любом другом наборе инструментальных средств для JavaScript. Главная ценность Dojo состоит в том, что он устраняет несовместимость между броузерами и делает выполнение наиболее типичных операций на столько простым, насколько это возможно, защищая вас от необходимости писать и сопровождать шаблонный программный код, что позволяет максимально повысить вашу производительность труда.

Другой интересной особенностью, которая демонстрирует огромную мощь, заключенную в маленьком пакете, является функция dojo.que-ry – механизм, позволяющий быстро выполнять запросы к странице с использованием синтаксиса CSS3.

Например, поиск всех элементов DIV в странице выполняется очень просто, как показано ниже:
dojo.query("div") //отыскивает все элементы div в дереве DOM

Если вы попробуете выполнить эту инструкцию в консоли Firebug, то вы увидите, что она действительно возвращает список элементов DIV.


Поиск конкретного элемента DIV с определенным именем также выполняется очень просто:
dojo.query("div#d2") //проверяет наличие элемента div с атрибутом id=d2

А вот так выполняется поиск элементов определенного класса:
dojo.query(".blue") //возвращает список элементов с классом blue.

Заговорив о классах, следует заметить, что существует возможность отбирать элементы определенного типа, но, так как в нашем документе класс CSS применяется только к одному элементу DIV, нам необходимо применить класс blue еще к какомунибудь элементу. Но, вместо того чтобы редактировать страницу HTML, почему бы не воспользоваться еще одной встроенной функцией из библиотеки Base – dojo.addClass, чтобы применить класс к выбранному элементу, как показано ниже:
dojo.addClass("s1", "blue"); //добавляет класс blue в элемент SPAN

После применения класса blue к элементу s1, можно продемонстрировать другой вариант запроса с помощью функции dojo.query:
dojo.query("span.blue") //возвращает только элементы span с классом blue

Уловили суть? Уверен, вы смогли бы реализовать все это с использованием своих собственных обходных приемов, но разве не проще знать, что инструментальный набор изолирует вас от всего этой чехарды и вместо этого предоставляет единственную и простую в использовании функцию?.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
dojo.addOnLoad
dojo.byId
Исследование Dijit
Исследование Dojo с помощью Firebug
Исследование библиотеки Base