plainjs
Простой и быстрый Javascript фреймворк уровня представления (View).
Примеры использования Plainjs можно посмотреть в репозитории https://github.com/oberset/plainjs-test-app
Plainjs рендерит ваши данные в html-код страницы. Для отрисовки данных на странице используется нативный DOM-интерфейс браузера. Рендеринг осуществляется на основе html-шаблона (т.к сам шаблон представляет из себя кусок обычного html, его парсинг тоже осуществляется с помощью DOM браузера).
Пример "Hello World" (отрисуем строку текста в браузере):
; Pjs;
В приведенном примере мы импортируем класс PlainComponent (в примере используется синтаксис es6) и вызываем у него статический метод render. В качестве параметров методу render мы передаем html-шаблон, порцию данных и родительский DOM-узел, в который будет осуществляться вставка результата рендеринга.
Для управления данными можно создать собственный класс. В следующем примере мы создадим простой компонент состоящий из шаблона и класса-обработчика. Компонент будет состоять из поля checkbox и кнопки, при нажатии на которую checkbox будет менять свое состояние checked/unchecked.
Подключение компонента:
;; Pjs;
Код html-шаблона /components/checkbox/checkbox.html:
Код класса /components/checkbox/checkbox.js:
;;; { super; // установка начального состояния this; } { thisui = ; // получаем начальное состояние checkbox thischecked = thischecked; thisuibutton0; } { thisui = null; } ;
При обновлении данных Plainjs не перерисовывает весь шаблон целиком, а обновляет DOM только у измененных фрагментов.