Skip to content
This repository was archived by the owner on May 6, 2025. It is now read-only.

Main Logic

Jump to bottom
Pavel Motorin edited this page Feb 26, 2013 · 4 revisions

Main Logic

Описание бизнес-логики работы архитектуры.

Table of contents

Very first visit

При самом-самом первом заходе на сайт сервер отдает всю страницу целиком. После события DOM.ready построенное HTML-дерево подвергается парсингу с целью поиска виджетов. Никаких модификаций дерева со стороны архитектуры при этом не происходит.

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

Также вешается подписчик на клики по ссылкам, у которых есть аттрибут data-reload-sections и на такие же формы:

<a href="/some_page/" data-reload-sections="pageContent: #MainContent">Some Page</a>

<form action="/some_page/" method="get" data-reload-sections="pageContent: #MainContent">
  ...
</form>

Соответственно, все ссылки, которые осуществляют переходы по страницам нужно снабдить соответствущим аттрибутом. Это делается либо вручную, так как верстальщик при проектировании разметки должен сам понимать, в чем разница между страницами. Либо автоматически на сервере, если он умеет это делать.

Navigation

При клике на ссылку с нужным атрибутом, система перехватывает клик, и передает значение атрибута в качестве дополнительного заголовка запроса X-Che-Sections

X-Che-Sections: pageContent: #MainContent

В ситуации, когда нам нужно перезагрузить одновременно несколько частей страницы, получится следующее:

<a href="/some_page/" data-reload-sections="somePart: #LeftSide, otherPart: #RightSide">Some Page</a>

...

X-Che-Sections: somePart: #LeftSide, otherPart: #RightSide

Сервер разбирает этот заголовок, собирает нужные части и выдает в ответ response header:

  X-Che-Url: /some_page/

и HTML-код

  <title>Some Page Title</title>

  <section data-selector="#LeftSide">
    <h1>Some Part</h1>
    <p>There's description of the part with some pictures inside it.</p>
    <img src="/i/some_image.png" alt="Some image" />
  </section>

  <section data-selector="#RightSide">
    <h1>Another Part</h1>
    <p>Banner and so on here, for example.</p>
  </section>

Черхитектура принимает этот код, и анализирует его на предмет виджетов. Затем разбивает на части, соответствующие <section data-selector="..." />. После чего, каждая из этих секций вставляет в соответствующее место в DOM-дерево. Финальным аккордом инициализируются найденные виджеты.

Также пришедший код запоминается в LocalStorage для истории.

History

Приходящий через такого рода AJAX-запросы код автоматически кладется в LocalStorage для дальнейшего использования. Формат хранения простой: `sectionsHistory//some_page/|header:pageContent: #MainContent`.

Соответственно, если пользователь еще раз на сайте нажимает на ссылку, в которой url и data-reload-sections соответствуют тому, что уже есть в LocalStorage, то для ускорения, мы сразу достаем нужные данные из LocalStorage и вставляем в DOM-дерево.

При этом на фоне отправляется стандартный запрос на сервер. Приходящий HTML сравнивается с хранящимся, и если он отличается, то этот кусок страницы еще раз обновляется, а в LocalStorage кладется новая запись.

Back/Forward buttons

Когда пользователь нажимает в браузере Back, система достает... (откуда и что?)

Widgets

Виджетами в данной системе называются независимые блоки HTML-кода, с опционально привязанными к ним скриптами и стилями. Для упрощения поиска каждый виджет имеет класс `widget` в корнем элементе. 
<div class="bPopup widget" data-js-modules="bPopup.js">
  ...
</div>

Когда HTML-parser находит подобную конструкцию, то он достает список скриптов из data-js-modules и отдает их загрузчику. Каждый модуль регистрируется как require-модуль, который чаще всего возвращает объект с открытым методом init().

Менеджер виджетов (? такой вообще есть?) создает экземпляр виджета, инициализируя все привязанные js-модули в контексте этого HTML-блока: .init( blockRootElement ).

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

Виджеты могут быть вложенными друг в друга.

<div class="popup widget" data-js-modules="popup.js">
  ...
    <div class="gallery widget" data-js-modules="gallery.js">
      ...
    </div>
  ...
</div>

Clone this wiki locally