Длинный и нестабильный способ

Как разработчик, питающий слабость к удобству, вы могли бы захотеть добавить небольшую панель управления сбоку страницы, с помощью которой можно было бы переключать режим подсветки определенных типов сущностей в результатах поиска. В результате низкоуровневого подхода, связанного с применением JavaScript для прямого манипулирования деревом DOM, мог получиться следующий программный код:
function addHighlighting(entityType) {
var nodes = document.getElementsByTagName("a");
for (var i=0; i < nodes.length; i++) {
if (nodes[i].getAttribute('rel')==entityType) {
nodes[i].className="highlighted";
}
}
}
function removeHighlighting(entityType) {
var nodes = document.getElementByTagName("a");
for (var i=0; i < nodes.length; i++) {
if (nodes[i].getAttribute('rel')==entityType) {
nodes[i].className="";
}
}
}

Эти функции решают поставленную задачу, но они основаны на наивном предположении, что с результатами поиска не может быть связан никакой другой класс, кроме highlighted, потому что обе функции напрямую переопределяют имя класса. Таким образом, нам также потребуется создать функции добавления и удаления классов в узлах, которые, возможно, относятся к нескольким классам, что влечет за собой необходимость приложения дополнительных усилий по организации поиска по строковым значениям свойства className и затем добавление или удаление заданного имени класса.


Чтобы предотвратить дальней шее «захламление» программного кода, можно было бы использовать функции addClass и removeClass из библиотеки Base, но это не уменьшит уже имеющиеся «горы хлама».

Ниже приводится способ, который успешно решает поставленную за дачу с помощью функции query:
function addHighlighting(entityType) {
dojo.query("span[type="+entityType+"]").addClass("highlighted");
}
function removeHighlighting(entityType) {
dojo.query("span[type="+entityType+"]").removeClass("highlighted");
}

В данном конкретном случае нам удалось избавиться от низкоуровневых манипуляций с деревом DOM, от циклов for и условной инструкции в обмен на элегантный синтаксис CSS. Кроме того, эти функции учитывают возможность, что к сущностям в документе с результатами поиска может быть применено сразу несколько классов CSS. Несмотря на то что dojo.query не может ничего такого, что нельзя было бы сделать более длинным способом, тем не менее предыдущее исследование наглядно демонстрирует, что dojo.query обеспечивает единый и универсальный интерфейс поиска и манипулирования элементами дерева DOM на очень высоком уровне и что усложняется в этом случае строка критерия, а не логика условных инструкций.


Не говоря уже о том, что применение dojo.query выглядит более элегантно, чем манипулирование элементами DOM на низком уровне. Если вы уже стали строить планы, как и где задействовать функцию query, подождите немного: стоит опираться на гибкость, которую предлагает класс NodeList.

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

Статьи из раздела Dojo на эту тему:
NodeList
Анимация
Аргументы в стиле «функции в виде строк»
Методы, напоминающие методы массивов
Модуль Behavior

Вернуться в раздел: Dojo / Манипулирование узлами