В продолжение вводной части habrahabr.ru/post/196248, в этой статье я обзорно расскажу о механизме компонентной системы реализованной в библиотеке controls.js и используемой в Markdown webdocs для создания и вставки активного контента в текстовый документ.

Технически, компоненты Markdown webdocs, это контролы в терминах controls.js организованные в отдельные модули и снабженные дополнительными ресурсами. Практически, компоненты Markdown webdocs, это расширенный аналог широко используемых в веб-дизайне шаблонов, реализованных таким образом, что бы их можно было вызывать прямо из текста страницы.

Компонент, это изначально некий JavaScript объект имеющий параметры, атрибуты содержащие данные, функцию-шаблон html кода и конечно же те свойства и методы, которые мы определим в его коде.

Некоторый базовый набор готовых компонент встроен в document.js и доступен сразу после инициализации, также возможна автоматическая загрузка по имени компонента из предопределенной папки /components или подключением на страницу внешних скриптов содержащих модуль компонента.

Элементарные компоненты не содержат вспомогательного кода и стилей и не меняют свое поведение и представление, сложные компоненты могут содержать код и стили, управлять своим состоянием, поведением и представлением, взаимодействовать с документом и внешним миром и даже мутировать в другие компоненты превращаясь полностью в другой компонент. Самостоятельные компоненты позволяют полностью вынести все зависимости в отдельный модуль. Универсальные компоненты в своем ареале обитания не ограничены браузером. Хороший, годный компонент может интерпретироваться на сервере, а исполняться в браузере, или быть передан из одного фрейма в другой. Надежные компоненты не зависят от порядка загрузки файлов ресурсов на странице. Умные компоненты способны кешировать данные или выполнять предзагрузку, ленивые компоненты не мешают другим компонентам работать.

Hello World! по-компонентски

(function() {
    function HelloWorld(parameters, attributes) {
        
        $ENV.controls.controlInitialize(this, 'hello', parameters, attributes, $ENV.default_template, $ENV.default_inner_template);

        this.text('# Hello World!'); // ← Markdown
    };
    HelloWorld.prototype = $ENV.controls.control_prototype;
    controls.typeRegister('hello', HelloWorld); // ← Регистрация компонента
})();

Что бы функция стала конструктором объектов компонента в Markdown webdocs, необходимо выполнить несколько условий:
— в цепочке прототипов должен быть controls.control_prototype, это дает объекту общие свойства и методы контрола.
— функция должна быть зарегистрирована вызовом controls.typeRegister() или controls.factoryRegister()
— в модуле конструктора необходима инициализация вызовом controls.controlInitialize()
— желательно при инициализации назначить специальные шаблоны, понимающие разметку Markdown. $ENV.default_template и $ENV.default_inline_template являются именно такими шаблонами контрола, совместимыми с Markdown webdocs и их можно использовать в большинстве пользовательских компонентов.

В приведенном выше примере только строка this.text('# Hello World!'); является кодом проблемной области.

Фоновая динамическая загрузка компонента

Динамическая загрузка удобна в целях прототипирования и отладки. Если создать файл controls.hello-world.js с кодом примера Hello World! и разместить по пути components/controls/hello-world/controls.hello-world.js в папке сайта, в тексте страниц этого сайта можно будет использовать нотацию вызова этого компонента: %hello()%hello, скрипт будет загружен только при наличии этого вызова. На время с момента исполнения кода инициализации до фактической загрузки скрипта (а это время может быть заметным), вместо компонента в указанном месте документа будет расположен компонент-заглушка Stub.

Манифест компонента

Механизм компонентной системы основан на достаточно простых, систематичных и универсальных базовых принципах:

Модульный принцип построения

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

Модификации

Основное назначение параметров — выбор модификации компонента. Модификация это может быть другое представление того же компонента, а может быть и отдельный компонент. Параметры так же используются и для передачи значений атрибутов объектам, там где это удобно.
Примеры:
%page-layout#scheme=centered()%page-layout – здесь scheme это параметр позволяющий выбрать ту или иную модификацию, что для этого компонента означает выбор схемы компоновки страницы.
%block#$class=m41()%block — назначение имени класса блоку, это пример передачи через параметры значения атрибута.

Создание HTML кода, управление элементами DOM, обработка событий

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

Произвольная вложенность, фрактальность, систематичность

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

Зачем это все нужно?

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

На мой взгляд, на сегодня технически это наиболее оптимальный способ создания сложных веб-документов и он позволяет избежать ряд принципиальных недостатков, присущих другим технологиям. (И упростить код). С помощью технологии внешних компонентов удалось практически бесшовно добавить к двум уже привычным и используемым вместе разметкам Markdown и html добавить третью, дополняющую их недостающими элементами — шаблонами, модульностью и структурно организованным активным кодом.

А те несколько недостатков, что присущи сейчас всем JavaScript сайтам, есть уверенность в ближайшем будущем будут решены, ведь JavaScript сайтов все больше и их поддержка в сети со временем только возрастает.

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

Если вы ничего не поняли в том что я тут написал… буду писать еще и со временем постараюсь все внятно донести и ответить на все возникающие вопросы.

Проект

За это время проект обзавелся названием Markdown webdocs, надеюсь это будет новым словом в сетевых технологиях. Вы можете оставлять замечания и пожелания на гитхаб, в блоге или группе Вконтакте. Если вы захотите оказать помощь проекту или воспользоваться специальным предложением, но не знаете как это сделать, обращайтесь непосредственно ко мне, все контакты опубликованы в моем профиле.
Сайт проекта aplib.github.io/markdown-site-template
Репозиторий github.com/aplib/markdown-site-template

Ознакомление с компонентами в Markdown webdocs