xmoonlight: includeHTML - простая модульная разработка пользовательского интерфейса приложения на HTML/JS/CSS

includeHTML - простая модульная разработка пользовательского интерфейса приложения на HTML/JS/CSS

Верстаете многостраничные шаблоны для сайтов, разрабатываете сложную админку, создаёте мобильное, PWA, RIA или SPA-приложение?
Этот инструмент поможет "склеивать" вашу вёрстку и JS-код внутри приложения максимально просто и удобно, и, разумеется, динамически управлять загрузкой любых блоков, стилей и javascript-скриптов на протяжении всей работы приложения.

includeHTML - решение всех проблем в плане модульной разработки интерфейса и предотвращение полной перезагрузки страницы при обновлении одного или нескольких блоков!

Поддержка работы в следующих браузерах: IE9+, FireFox, Chrome и других.
Поддержка протоколов: http://, https://, file:///
Вставка через теги или javascript: HTML, JS, CSS, TXT

Рекурсивная загрузка блоков из других блоков и вложенных каталогов.

Давайте посмотрим более подробно на то, что может данная библиотека.

Основные преимущества:

1. Всего ОДНА ФУНКЦИЯ!
2. Вставка любой HTML-разметки через HTML-тег или через JS-функцию.
3. Асинхронная и синхронная загрузка (по желанию).
4. Рекурсивная загрузка всех вложенных зависимых блоков.
5. Создание своей функции-обработчика после окончания загрузки нужного блока.
6. Возможность любой компоновки блоков (включая бесконечную вложенность одних в другие!) на одной странице.
7. Возможность многократного повторного использования блока(-ов) на разных страницах.
8. Возможность создания своих представлений интерфейса (layouts) в зависимости от целей конкретного пункта в главном (или второстепенном) меню раздела/категории/страницы.

Подключение:

1	<script src="js/includeHTML.js"></script>

Загрузка блока (пример):

1	<div data-src="header.html"></div>

Загрузка любым тегом (HTML, асинхронная):

​
​
​
​
​
<div data-src="menu.html"></div>
<div data-include="menu.html"></div>
<include src="menu.html"></include>
<div data-src="js/1.js"></div>
<div data-src="log"></div>

Асинхронная загрузка (javascript):

​
​
​
​
​
​
​
<script>
   includeHTML('header.html', document.getElementById('header'));
   includeHTML('menu.html', document.getElementById('mainMenu'));
   includeHTML('green.css');
   includeHTML('js/1.js');
   includeHTML('log.txt','log');
</script>

Синхронная загрузка (javascript):

​
​
​
​
​
<script>
  includeHTML('header.html', document.getElementById('header'), function(){
    includeHTML('menu.html', document.getElementById('mainMenu'));
  });
</script>