1.7 Поддержка Smart-компонентовlink

Назначениеlink

SFLoaderPlugin и модуль ComponentLoader реализуют полную поддержку Smart-компонентов — это самостоятельные элементы, которые:

  • загружаются динамически (JS/CSS);
  • имеют отдельный HTML-шаблон;
  • могут содержать собственные свойства, события и стили;
  • управляются независимо от обычных компонентов.

Особенности Smart-компонентовlink

  • Размещаются внутри тега <smart ... />;
  • Имеют атрибут name, по которому определяется тип компонента;
  • Поддерживают атрибуты: data, property, events, modify;
  • Атрибуты сериализуются, декодируются и передаются как объект.

Обработка инициализацииlink

  1. Поиск компонентов в DOM (initComponents()):

    1. Ищет все <smart> элементы;
    2. Парсит атрибуты, назначает уникальный ID;
    3. Клонирует оригинальную ноду и сохраняет в smartTemplates.

  2. Добавление стилей и скриптов:

    1. appendStyle() — подгружает CSS по пути:
      /simai/asset/simai.framework/sf5.master/smart/<name>/css/<name>.css

    2. appendScript() — загружает JS и создает экземпляр компонента: /smart/<name>/js/<name>.js

  3. Рендеринг:

    1. Метод drawComponent() создаёт инстанс Smart-компонента (new component.item()), добавляет его в список и вставляет в DOM.

Загрузка и кеширование шаблоновlink

Smart-компоненты используют HTML-шаблоны, которые:

  • получаются с сервера один раз (при первом использовании);
  • сохраняются в CacheManager.cachedTemplates;
  • затем сжимаются через compressToUTF16() и записываются в localStorage.

Хранилище в localStoragelink

localStorage["SF_SMART_GZIP"] = compressToUTF16(JSON.stringify(this.cachedTemplates));

Загрузка из localStoragelink

const gzip = localStorage.getItem('SF_SMART_GZIP');
this.gZipReady = JSON.parse(decompressFromUTF16(gzip));

Также используется объект cachedFakeContent, в котором сохраняются подготовленные HTML-блоки (заглушки), готовые к вставке.

Вспомогательные методы CacheManagerlink

Метод Назначение
setCachedFakeContent(obj) Сохраняет fake-шаблон компонента
setCachedTemplates(obj) Объединяет и сохраняет шаблоны
setLocalZipReady() Сохраняет шаблоны в localStorage (сжатые)
getLocalZipReady() Восстанавливает шаблоны из localStorage
setCookie(obj, name) Сохраняет данные в cookie (опционально)
getCookie(name) Читает значение cookie

Когда используется кэшlink

  • Если шаблоны уже были загружены ранее и сохранены в localStorage, повторный запрос не выполняется;
  • Если CacheManager.gZipReady содержит нужный шаблон — он берётся из него и вставляется без запроса к серверу;
  • Это позволяет загружать даже Smart-компоненты без интернета, если шаблоны уже закешированы.

Преимущества Smart-компонентовlink

  • Чётко отделённые: каждый компонент независим;
  • Удобная система шаблонов и параметров;
  • Поддержка динамической вставки в DOM;
  • Сжатое и быстрое кеширование в localStorage;
  • Быстрое восстановление интерфейса при повторной инициализации.