В новых браузерах для перемещения по DOM-дереву появилась возможность использовать интерфейс «Element Traversal», который позволяет искать элементы, исключая текстовые узлы так, как это происходит в Internet Explorer, при использовании стандартных firstChild, lastChild, nextSibling и previousSibling, что увеличивает скорость поиска элементов.
Встроенной поддержки механизма выборки элементов с использованием CSS-селекторов нет, но легко внедрить один из существующих.
Возьмем готовые решения Sizzle, Peppy и Yass, и сделаем расширение для js-core, которое будет автоматически преобразовывать список элементов, выдаваемый этими движками, в объект для работы со списками узлов, предусмотренный в framework’е.
Итак, прошло уже много времени с момента, когда я (Коробкин Дмитрий) начал заниматься разработкой своего JavaScript фреймворка. Целью было создать продукт, который бы занял свое место среди небольших и быстрых библиотек, позволяющих более удобно производить манипуляции с DOM, легко организовывать AJAX-запросы, а главное в какой-то степени избавить программиста от проблемы кросс-браузерности.
Теперь, пройдя множество исправлений, дополнений и модификаций, js-core вполне может использоваться в проектах любой сложности, обеспечивая достойный уровень производительности. В версии 2.7 структура фреймворка была полностью изменена, он не будет вызывать конфликты с другими скриптами, из-за внедрения пользовательских методов в прототипы встроенных объектов JavaScript. В глобальное пространство имен помещается только один объект с ссылками core и $ на него. Появилась возможность работы со списками узлов.
Не так давно Джеймс Донахью выпустил первый бета-релиз «Peppy» — движка селекторов, предоставляющего возможность использовать CSS3 для выборки элементов. По результатам сравнительных тестов на производительность «Peppy» занимает топовые позиции.
Так как я пока сомневаюсь, стоит ли мне писать подобный модуль для «js-core», потому что считаю, что вполне достаточно стандартных методов DOM для выбора нужных узлов, но всё-таки иногда бывают случаи, когда использование синтаксиса CSS-селекторов для этих целей очень удобно, я решил попробовать совместить мой фреймворк и библиотеку «Peppy». Как оказалось, все очень просто.
Не так давно я начал заниматься разработкой JavaScript framework’а «js-core» для применения в небольших проектах, в которых использование таких готовых универсальных решений, как «Prototype», «MooTools» или «jQuery» является не оправданным, в связи с достаточно большим объемом кода, большая часть которого не используется. Framework получился легкий (в несжатом виде версия 2.5.1 занимает около 15кб), но в тоже время достаточно функциональным.
Решил провести небольшой тест производительности своего JavaScript framework’а «js-core». Для сравнения, конечно же, взял «jQuery», который хорошо знаю и имею отчетливое представление о его работе.
Конечно, «js-core» не столь функционален, как «jQuery», поэтому я решил провести тест, на примере, который можно записать практически одинаково и в моем framework’е и в «jQuery».
Разработка Коробкина Дмитрия (Octane) — специалиста по веб-интерфейсам в нашей веб-студии в Волгограде. Небольшой, но многофункциональный framework для удобного и быстрого программирования на JavaScript.
Функция prepend
добавляет новый или перемещает существующий узел в начало списка дочерних элементов текущего узла и возвращает копию объекта _$
, содержащую ссылку на новый/перемещенный узел.
В качестве входного параметра функция может принимать строку с именем тега нового узла или ссылку на уже существующий узел.
prepend('div') — функция создаст новый узел с именем тега DIVи поместит его в начало списка дочерних элементов текущего узла.
prepend(node) — функция переместит узел, доступный по ссылке node, в начало списка дочерних элементов текущего узла.$('test').prepend('div');В начале списка дочерних элементов узла с идентификатором test
будет добавлен новый узел с именем тега DIV
.
function prepend(id, tag) {
var node = document.getElementById(id),
first = node.firstChild,
newNode = document.createElement(tag);
node.insertBefore(newNode, first);
return newNode;
}
prepend('test', 'div');
Функция append
добавляет новый или перемещает существующий узел в конец списка дочерних элементов текущего узла и возвращает копию объекта _$
, содержащую ссылку на новый/перемещенный узел.
В качестве входного параметра функция может принимать строку с именем тега нового узла или ссылку на уже существующий узел.
append('div') — функция создаст новый узел с именем тега DIVи поместит его в конец списка дочерних элементов текущего узла.
append(node) — функция переместит узел, доступный по ссылке node, в конец списка дочерних элементов текущего узла.$('test').append('div');В конец списка дочерних элементов узла с идентификатором test
будет добавлен новый узел с именем тега DIV
.
function append(id, tag) {
var node = document.getElementById(id),
newNode = document.createElement(tag);
node.appendChild(newNode);
return newNode;
}
append('test', 'div');
Функция parent
возвращает копию объекта _$
, содержащую родительский узел текущего узла.
var node = $('test').parent();В переменную node будет помещен объект с ссылкой на родительский узел текущего узла с идентификатором test
. Чтобы получить сам узел, необходимо обратиться к атрибуту node
возвращаемого объекта или воспользоваться функцией el
.
var node = $('test').parent().node;
//или
var node = $('test').parent().el();function parent(id) {
return document.getElementById(id).parentNode;
}
var node = parent('test');
