Декларативный движок MVVM — EasyWebApp v4

Основан на загрузчике AMD, jQuery v3.2+ и поддерживает IE bk 9+, ECMAScript 5+ и HTML 5+

[Нативный шаблон]

Шаблон EWA полностью следует стандартным семантикам различных нативных веб-технологий ——

• UI структура: стандартные теги HTML 5+, data-* пользовательские атрибуты

• Данные: текст и атрибуты HTML-тегов, содержащие шаблоны ECMAScript 6 (например ${view.propX})

• События: привязка функций аналогично привязке данных

• Загрузка ресурсов: HTTP URL с параметрами, автоматическое обработки относительных путей

Движок MVVM автоматически загружает HTML и JSON, сканируя DOM-дерево, чтобы построить дерево VM. Разработчики могут сосредоточиться на обработке данных и привязке событий, не требуя локальной компиляции или сборки, и наслаждаться низкой стоимостью обучения при использовании нативного HTML и JavaScript.## 【Разделяемые представления】

ViewModel представляет View (HTML/DOM) на основе модели "данных-ориентированного" программирования ——

1. Все HTML-структуры View должны быть расположены в единственном контейнерном элементе для удобства привязки VM

2. В любой момент времени контейнер View может быть привязан только к одному объекту VM

3. При рендеринге VM проверяет типы данных JavaScript, автоматически соответствует HTML-атрибутам и DOM-объектам, указанным в шаблоне HTML

4. Функции обратного вызова стандартных событий DOM и пользовательских событий VM также привязываются к View как часть данных, без необходимости специальных API

5. HTML-теги контейнера View относятся к структуре верхнего View, но привязанная к нему VM слушает изменения данных в пользовательских атрибутах data-*=""

6. Если нет других ссылок на VM или контейнер, которые были отвязаны или удалены, весь View будет автоматически удален сборщиком мусора

Встроенные объекты представлений

API документация

Конструкторы всех этих представлений доступны в пространстве имен $.fn.iWebApp и могут использоваться без инициализации экземпляра WebApp().

Быстрые методы jQuery

• Создание представления: $('selector of view').view(Class_Name, iScope)
• Поиск представления: $(':view', Root_DOM).view()

[Декларативный AJAX]Допустимые HTTP URL следующего формата будут пониматься EWA-движком —

path/to/template.html?key1=value1&keyN=valueN&data=/path/to/json

path/to/template.html и /path/to/json будут загружаться параллельно, а {key1: value1, keyN: valueN} станут частью начальных данных VM для template.html.

(0) Загрузка страницы

<a target="_blank" href="path/to/outer.html">
    Открыть внешнюю страницу в новом окне (перекрестная ссылка по умолчанию открывается в новом окне)
</a>
<a href="path/to/static.html">
    Статическая SPA-страница
</a>
<a href="path/to/template.html">
    Шаблон без начальных данных
</a>
<a href="path/to/template.html?data=/path/to/json">
    Инициализация шаблона одной порцией данных
</a>
<a href="path/to/template.html?key1=value1&keyN=valueN&data=/path/to/json">
    Инициализация шаблона одной порцией данных и передача некоторых параметров
</a>
<div id="PageBox"></div>
<script>
    $('#PageBox').iWebApp('//api.test.com/v1');
</script>

SPA-страница всегда загружается в элементе, где инициализируется экземпляр WebApp.

(1) Отправка формы

<form method="put" enctype="application/json" action="?data=/path/to/submit">
    <input type="hidden" name="extraParam" />

    <input type="text" name="key1" required /> Введено ${view.key1.length} символов

    <input type="submit" />
</form>

• Атрибут method поддерживает общие HTTP-методы, используемые в RESTful API
• Атрибут enctype поддерживает общие MIME-типы, используемые в стандарте MIME-Type
• Проверка данных формы: полностью зависит от HTML 5 Form API### (2) Включение компонентов

<div data-href="path/to/template.html" data-key1="${view.Key1}" data-keyN="${view.KeyN}">
    <span slot="Slot_1"></span>
    <span slot="Slot_2"></span>
</div>

EWA-компоненты поддерживают механизм слотов и пользовательские атрибуты стандартного проекта Web Components, но включение осуществляется без использования пользовательских тегов.

(3) Запрос к интерфейсу

<a data-method="PUT" href="?data=/path/to/put">Поставьте лайк</a>

<h3>Создание таблицы</h3>
<div data-href="?data=/path/to/list?count=10&page=1">
    <ul data-name="list">
        <li>Внутренний индекс: ${view.__index__}</li>
    </ul>
    Всего ${view.total} элементов
</div>

[Полноценный фронтенд-маршрутизатор]

Используя поддержку HTML 5 History API для "чистых Hash URL", движок EWA непосредственно размещает URL страницы SPA после #! (Hash Bang, правило маршрутизации, предложенное Google), что позволяет пользователям использовать F5 или Ctrl + C/V, даже если нет поддержки с серверной стороны.

(0) Запросы-перехватчики

(new EWA()).on({
    type:    'request',
    src:     'api.test.com'
},  function (iEvent, iAJAX) {

    //  Утилиты, расширенные на основе iQuery, для обработки объекта опций jQuery AJAX

    iAJAX.option.url = $.extendURL(iAJAX.option.url, {
        token:    self.sessionStorage.token
    });
});

(1) Обработка ответа

(new EWA()).on({
    type:    'template',
    href:    /\.md$/i
},  function (iEvent, iData) {

    //  Преобразование Markdown в HTML

    return  marked(iData);

}).on({
    type:    'data',
    src:     'api.test.com'
},  function (iEvent, iData) {    if (iData.code || (iEvent.method != 'GET'))
        self.alert(iData.message);
    else
        return iData.data;
});

(2) Завершение загрузки

(new EWA()).on({
    type:    'ready',
    href:    'path/to/template.html'
},  function (iEvent) {

    //  Готовность компонента/страницы

    //  То есть, UI-рендеринг завершен, за исключением мультимедийных ресурсов, таких как img, iframe, audio, video и т.д.
});

(3) Утилиты

• Получение исходного URL маршрута: WebApp.prototype.getRoute()

  • Чтобы предотвратить неправильную обработку некоторых URL-анализаторов, маршрут EWA кодируется в Base64

• Изменение начальных данных маршрута: WebApp.prototype.setURLData(key, value)

  • При вызове можно передать только один объект данных

  • Каждый вызов создает новую запись в истории браузера

• Навигация по истории страниц: WebApp.prototype.loadPage(iStep)

  • Без параметров обновляет текущую страницу

  • При передаче параметров, их использование аналогично window.history.go()

  • После переключения страницы она перезагружается, и решается промис, возвращаемый этим методом

[Асинхронные компоненты]

(0) HTML-шаблоны

Компонент EWA сам по себе является полностью легальным фрагментом HTML, который может быть непосредственно загружен с помощью AJAX и экземплирован в дереве DOM ——```HTML

Как сам EWA-движок, так и код JavaScript для EWA-компонентов следует стандарту AMD, и его необходимый формат следующий:

require([
    'jquery', 'Module_1', 'Module_N', 'EasyWebApp'
],  function ($, Module_1, Module_N, EWA) {

    // Получение единого экземпляра инициализированного WebApp

    var iWebApp = new EWA();

    EWA.component(function (iData) {

        // iData — это JSON, загруженный параллельно с HTML-компонентом

        // Здесь this — это автоматически созданный объект VM

        var VM = this;

        iData.handler_1 = function () {

            // Обратные вызовы также могут быть частью данных и привязаны к HTML с помощью шаблонного синтаксиса

            // Здесь this — это объект VM, соответствующий элементу в структуре HTML

            this.xxx = 'yyy';
        };

        // Если вы изменили ссылку на объект данных, вы должны вернуть новый объект

        iData = $.extend({ }, iData);

        return iData;
    });
});

EWA-движок автоматически обновляет объект VM с помощью возвращенных данных.

(2) Официальные компоненты

https://boot-web.tk/

[Декларативное событие]

Декларативная форма привязки событий: <element onEvent="${view.callback}" />

• element: имя HTML-тега
• Event: имя события HTML / EWA
• callback: ключ функции обратного вызова в объекте данных, при выполнении которой this указывает на объект VM, соответствующий элементу в структуре HTML### Встроенные события | Имя события | Источник | Способ прослушивания | Причина триггера | Этап триггера | Данные обратного вызова | |:-----------:|:--------:|:--------------------:|:-----------------:|:-------------:|:-----------------------:| | request | InnerLink | JS, HTML | AJAX запрос | До | Опции jQuery AJAX, объект jqXHR | | template | HTMLView | JS, HTML | Шаблон компонента | После | Код структуры компонента (например, HTML, Markdown) | | data | InnerLink | JS, HTML | Загрузка данных | После | Объект JSON | | ready | View | JS, HTML | Рендер компонента | После | Объект представления | | route | WebApp | JS | Переключение маршрута | После | Сборка элементов сопоставленных ссылок (объект jQuery) | | prefetch | WebApp | JS | Рендер компонента | После | Массив URL ссылок, на которые ссылается текущий компонент | | attach | View | JS | Монтирование компонента | После | | | detach | View | JS | Отмонтирование компонента | После | | | update | View | JS, HTML | Обновление пользовательских свойств | После | Объект пар ключ-значение обновлений |

Интерфейс событий- Множественные условия для наблюдателей Observer($_Box)

• Поиск экземпляра: .instanceOf(iDOM, Check_Parent)

• Регистрация обратного вызова: .prototype.on(iEvent, iCallback)

  • Функция обратного вызова this указывает на объект, на котором был зарегистрирован вызов
  • Первый параметр функции обратного вызова — объект события, второй параметр — дополнительные данные, с которыми событие было вызвано
  • Возвращаемое значение текущей функции обратного вызова будет передано как второй параметр следующей функции обратного вызова

• Отмена регистрации обратного вызова: .prototype.off(iEvent, iCallback)

• Одноразовое слушание: .prototype.one(iEvent, iCallback)

  • Если отсутствует обратный вызов, возвращается объект Promise

• Вызов события: .prototype.emit(iEvent, iData)

• Реализованные классы: View, InnerLink, WebApp

Параметр iEvent может быть только строкой с именем события или объектом, описывающим более сложные условия (свойства объекта могут быть строками, регулярными выражениями, объектами DOM и т.д.).