StateController. Как это работает.

[s0rr0w]

Принципиальная схема работы SC отличается от любого другого фреймворка. StateController построен на событийной модели и оперирует такими понятиями как событие, обработчик, зона распространения события, объект обработчика и другими. Обработчики SC не являются обработчиками DOM, наступление события контроллируется разработчиком, а не браузером и пользователем.

Если в том же jQuery работа с DOM начинается с поиска элемента или группы элементов, то в SC началом всего является запуск события. Событие в SC является неким пакетом данных, который запускают определенному набору элементов внутри одного или нескольких контейнеров. Пакет формируется в момент запуска события и его путешествие по дереву нод не останавливается до окончания обработки.

Рассмотрим типичный набор данных, которые формируется при запуске события.

Детальное описание можно прочитать в документации.

Аналог из жизни может быть следующим. У вас в курилке сидят мужчины и женщины разных профессий. Вы - прораб. Вам пришло некое задание. Вы заходите в курилку и говорите, сегодня мне нужны маляры для покраски стен. На работу вызовутся, например, 4 мужчин и 1 женщина. Каждый из них возьмет кисточку, краски, и будут красить стены.

Есть работа - событие. Параметр работы - покраска стен. Обработчики у каждого работника - покраска стен кисточками и краской.

Если вам пришло задание сшить шторы, то вы должны запросить только тех людей, которые могут шить. Если вам нужны для работы только женщины, то вы ограничиваете дополнительными условиями, что нужны женщины, которые могут шить. Даже если в курилке все смогут шить, но выполнять работу будут только те, кто попал под определенные рамки.

Следующая иллюстрация показывает примеры фильтрации нод при разных значениях фильтра.

Фильтрация нод нужна по разным причинам. При огромном количестве нод внутри контейнера, скорость работы скрипта будет удручающей. Поэтому запуск события без фильтрации зоны распространения события желательно сводить на нет. Вторая причина - функциональное ограничение, когда намеренно ограничивается зона распространения события, чтобы не срабатывали дочерние обработчики или определенный набор обработчиков.

После запуска события StateController выбирает некий массив нод, с учетом фильтра. Если фильтры не установлены, то выбираются все ноды внутри контейнера. Далее, из этого массива отбираются только те ноды, которые содержать атрибут SC. Среди этих нод выбираются те, у которых есть обработчики, которые реагируют на данное событие. И после этого запускаются обработчики для каждой из оставшихся нод. Если изменить фильтр, то некоторые ноды могут выпадать из списка обрабатываемых нод. Стоит помнить, что движение по дереву нод осуществляется от последней ноды к первой.

При запуске некого события нет разницы, кто именно его будет отрабатывать и какие действия он будет при этом производить. Вы просто запускаете событие, а элементы сами разбирутся, кому что делать, делать ли вообще, что именно делать при этом событии. Программирование при помощи SC должно быть совершенно другим. Типичное мышления разработчика, который использует JQ сводится в общем к следующим этапам: найти элемент или группу элементов, проделать какие-то действия над ними. Если нужно, то найти еще группу элементов, и проделать над ними следующую порцию действий. Мышление разработчика, который использует SC совершенно иное. Есть событие, его нужно отправить группе элементов. Если по пути обработки события возникло ее одно событие, то запустить его на обработку. Какие элементы будут обрабатывать это событие, как именно, знают сами элементы, а не скрипт, который производит манипуляции с ними.

А если возникает задание, например, добавить новый элемент в список обрабатываемых элементов, обычному разработчику нужно править скрипт, зачастую, вписывая новый элемент в десятки мест. SC-разработчику достаточно добавить новый элемент и указать, на какие события он будет реагировать и как; и, может, чуть изменить формат запуска события.

[s0rr0w]

Обработчики

Обработчики в SC представляют собой функции, которые выполняют какую-то полезную работу при наступлении события, на которое они реагируют, и всех необходимых условий.

Чтобы добавить обработчик в StateController, используется метод SC.addHandler. Первым параметром будет имя обработчика, вторым - собственно функция.

Функции передается три параметра:

* нода, на которой сработал триггер события

* объект с декларацией обработчика у этой ноды (scData)

* ссылка на объект data, который может быть установлен при вызове события.

При запуске события был использован фильтр p: "parent", который ограничил зону распространения события всего лишь нодой контейнера. Так как сработали все необходимые нам условия, будет запущен обработчик foo4.

Обработчик должен быть безликим. При создании обработчика помните, что он не ссылается на конкретные ноды, его код должен быть максимально универсальным. При соблюдении этих простых условий повторное использование кода может достигаться максимума.

[s0rr0w]

Простейший пример

Для примера возьмем простенькую задачу. Активируем нажатую ссылку путем присвоения класса "active".

sampleDemo1.zip

Теперь рассмотрим схему, как это все работает.

При нажатии на каждую из ссылок мы запускаем событие activate, при этом присваиваем этому событию некий индекс. Значение события хранится в специальном контейнере SC.states.

Далее, происходит перебор нод, из которых выбираются те, которые обрабатывают событие activate. Потом для каждой из нод запускается тот обработчик, который для данной ноды реагирует на нужное нам событие.

Третья нода имеет параметр 3, а значение события у нас было равно 1, значит у этой ноды удаляется класс. Для второй аналогично. А вот для первой срабатывает выделение ноды. Вуаля!

Логика программиста должна быть примерно следующая. Агрументы декларации (атрибут SC) обработчика (args) используются для того, чтобы идентифицировать некую ноду или создать некие входные параметры для обработчика. К примеру, можно модифицировать приведенный в примере обработчик, чтобы он не просто присваивал класс "active" ноде, а присваивал любой класс, который укажет разработчик. И тогда будет декларация выглядеть примерно так:

SC="activateMenuItem:activate:1:myOwnActiveClass"

Доступ к имени класса будет идти через scData.args[1].