Интеграция «Peppy» и «js-core»

Octane, 03.11.2008

Не так давно Джеймс Донахью выпустил первый бета-релиз «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 рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: JavaScript, js-core | Комментировать

Оставить комментарий

480×60
480×60