YASS: Yet Another cSS selector

Документация

YASS — это небольшая JavaScript-библиотека для выбора элементов из DOM-дерева по CSS-селекторам. Она поддерживает некоторые наиболее распространенные комбинации CSS-селекторов, которые приведены в CSS3-спецификации.

Параметры функции _ или yass

Основная функция для выбора элементов получает на вход 3 параметра: сам CSS-селектор, корневой элемент для выборки (по умолчанию берется document) и параметр noCache для сброса кэша по заданному селектору (кэщ будет автоматически сброшен для современных браузеров, но для IE его нужно сбрасывать вручную после изменений в HTML).

Более подробно примеры использования приведены в соответствующей секции.

Поддерживаемые селекторы:

• для выбора класса (например, .example),
• для выбора узлов по имени тега: span или div,
• наследование (например, div p a),
• выбор дочерних элементов через >,
• выбор дочерних узлов первого уровня через ~,
• выбор первого дочернего узла с помощью +,
• выбор элементов по идентификатору #id,
• универсальный селектор — *,
• запросы к атрибутам:
  • [type=checkbox] атрибуты с точным значением (class отработает по совпадению подстроки),
  • [title] — существование атрибута у элемента,
  • [rel~=nofollow] — наличие в атрибуте заданной строке в качестве значения, разделенного пробелами,
  • [class^=block] — значение атрибута, начинающееся с заданного значения,
  • [class$=hidden] — или заканчивающегося ею,
  • [alt*=image] — соответствие подстроки значения атрибута заданной,
  • [alt!=image] — отсутствие в атрибуте заданной строке в качестве значения, разделенного пробелами,
• позиции элементов относительно родителей: :first-child, :last-child,
• пустые элементы через селектор :empty,
• корневой элемент (HTML) через :root,
• выбранные элменты формы через псевдо-селектор :checked,
• позиция элемента в родительском элементе — :nth-child(3),
• выбор элементов по заданной позиции через :nth-child(even), :nth-child(odd), :nth-child(2n+1),
• псевдо-селетор языка :lang.

Все допустимые комбинации этих селекторов будут работать через вызов функции _(), в том числе влючая наборы селекторов, разделенных запятой ",". Возвращаемое значение будет либо одним узлом DOM-дерева, либо набором таких узлов. Если ни один элемент не соответстует заданному селектору, то YASS вернет null.

Неподдерживаемые селекторы:

Некоторые селекторы пока еще не поддерживаются. Вполне возможно, что ситуация изменится с выходом новых версий YASS.

• отрицательный селектор :not(...),
• множественные селекторы [class=class1][class=class2].

API для модулей

YASS является весьма гибкой библиотекой для подключения совершенно произвольных внешних JS-файлов как модулей. Например, можно динамически полностью загрузить Prototype или jQuery со всеми плагинами сразу после загрузки ядра YASS. Для этого нужно написать следующий код:

<script src="yass.js" type="text/javascript" class="yass-module-jquery"></script>

В этом примере:

1. YASS загрузится обычным образом.
2. Далее загрузится файл yass.jquery.js, который расположен там же где и исходный HTML-файл. И произойдет это по событию DOM ready.

Также можно загрузить любой внешний файл как модуль YASS. Например:

<script src="yass.js" type="text/javascript" class="yass-module-http://yass.webo.in/airee_ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

В конце кода для каждого модуля можно:

• Вызвать какое-то действие по загрузке всего дерева зависимостей для данного модуля. Зависимости записываются в классе произвольного узла DOM-дерева, например:

  <div class="yass-module-base-jquery"></div>

  В этом случае модуль jquery зависит от модуля base, и окончательное событие load не будет вызвано, пока вся цепочка зависимостей не загрузится полностью.

  Задать логику обработчика события загрузки модуля можно через init:

  _.modules[modules_name]['init'] = function(){...}

  Для модуля base искомый код будет выглядеть (в конце файла yass.base.js):

  _.modules['base']['init'] = function(){...}

• Динамически сформировать дерево зависимостей в процессе загрузке. Для этого в конце загружаемого модуля достаточно вызвать _.init(module_dependency + '-' + module_name), где module_dependency — модуль, от которого зависит загруженный. Тогда событие load не будет вызвано, пока не загрузится этот новый модуль.

• Вызвать любой обработчик сразу после загрузки самого JS-файла (в обход любых зависимостей). Для этого нужно записать в title искомого DOM-узла:

  <div id="jquery" class="yass-module-jquery" title="$('jquery').html('jQuery загружена через YASS')"></div>

  Сразу после загрузки и инициализации yass.jquery.js будет вызван код, заключенный в атрибуте title.

• Тажке можно использовать выделенное пространство имен для хранения специфичных параметров или объектов. Это пространство расположено в _.modules[module_name]. Там уже находятся некоторые предопределенные переменные и объекты:

  • _.modules[module_name].status указывает на текущее состояние соответствующего модуля (0 — еще не загружен, 1 — в процессе загрузки, 2 — загружен, 3 — ожидает разрешения зависимостей, -1 — не может быть загружен).
  • _.modules[module_name].yass — хэш модулей, которые зависят от данного.
  • _.modules[module_name].deps — массив модулей, от которых зависит данный.
  • _.modules[module_name].notloaded — число незагруженных зависимостей.
  • _.modules[module_name].deps.yass — хэш модулей, от которых зависит данный.

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

Дополнительные примеры использования данной логики можно подчерпнуть из онлайн-демонстрации загрузки дерева модулей.