Интеграция «Peppy» и «js-core»
Не так давно Джеймс Донахью выпустил первый бета-релиз «Peppy» — движка селекторов, предоставляющего возможность использовать CSS3 для выборки элементов. По результатам сравнительных тестов на производительность «Peppy» занимает топовые позиции.
Так как я пока сомневаюсь, стоит ли мне писать подобный модуль для «js-core», потому что считаю, что вполне достаточно стандартных методов DOM для выбора нужных узлов, но всё-таки иногда бывают случаи, когда использование синтаксиса CSS-селекторов для этих целей очень удобно, я решил попробовать совместить мой фреймворк и библиотеку «Peppy». Как оказалось, все очень просто.
Никаких изменений в файле «peppy.js» делать не нужно, просто подключите его к проекту после «js-core-2.5.4.js». Затем, в файл, где у вас будет код проекта или расширения для «js-core», добавьте несколько строк:
_$.prototype.query = function(selectorGroups, includeRoot, recursed, flat) {
return peppy.query(selectorGroups, this.node, includeRoot, recursed, flat);
};
$.query = peppy.query;Все готово, теперь вы можете использовать все прелести CSS3-селекторов, предоставляемые «Peppy», совместно с фунционалом «js-core». Функция «query» возвращает список найденных элементов.
var list1 = $('id'|node).query('selector' [, …]);
var list2 = $.query('selector' [, …]);Давайте рассмотрим какой-нибудь наглядный пример. Допустим у нас есть такой вот семантичный код формы:
<form id="my-form" action="">
<fieldset>
<label for="given-name">Given name: <input type="text" id="given-name" /></label>
<label for="family-name">Family name: <input type="text" id="family-name" /></label>
<label for="male">Male:</label>
<ul id="male">
<li><label for="man"><input type="radio" id="man" name="male" /> man</label></li>
<li><label for="woman"><input type="radio" id="woman" name="male" /> woman</label></li>
</ul>
<input type="submit" value="Отправить" />
</fieldset>
</form>Теперь, чтобы получить все <input type="text" /> внутри «#my-form», достаточно написать:
var inputs = $('my-form').query('input:text');
// или
var inputs = $('my-form').query('input[type="text"]');
В этом случае в функцию «peppy.query» автоматически отправляется параметр «root» — ссылка на узел с идентификатором «my-form».
Метод «$.query(…)» будет в точности соответствовать «peppy.query(…)».
var labels = $.query('label[for="man"]', '#my-form');Вот и всё, как видим ничего сложного, все просто и удобно 
Похожие темы
RSS-лента комментариев к этой статье | Обратная ссылка (trackback link)
