Как реализовать модульную загрузку традиционных HTML-страниц

На веб-сайтах существует большое количество общих модулей между многими страницами, таких как верхние и нижние колонтитулы, пользовательские столбцы и т. д. Для платформ с внутренними механизмами представления эти общие ресурсы относительно легко извлечь. Например, asp.net mvc имеет унифицированный макет MasterPage, @Section и другие функции, которые могут совместно использовать функции шаблона представления. Но с HTML вам не так повезло. Эти функции недоступны в html-файлах, поэтому, когда вы используете чистые HTML-страницы для написания веб-сайтов приложений, вам, возможно, придется столкнуться с этими повторяющимися задачами, хотя для достижения этой цели вы можете вкладывать IFrames. этот метод реализации не идеален и не дружелюбен.

Недавно я реализовал веб-сайт на основе своей собственной платформы. Поскольку в платформе нет внутреннего механизма просмотра, я столкнулся с такой проблемой... Давайте сначала посмотрим на реальную ситуацию.

Две вышеупомянутые HTML-страницы уникальны, за исключением основной части, а остальные блоки данных одинаковы. Если нет внутреннего механизма просмотра, что вы думаете об этом... Вначале каждое изменение должно быть синхронизировано с другими страницами. Позже я узнал, что это точно доведёт меня до смерти. Подумав некоторое время, я нашел решение.

Подумав об этом, я обнаружил, что общедоступный шаблон можно извлечь в HTML-файл (имя файла предварительно называется PublicModule.html) следующим образом:

 <шаблоны> <id шаблона=заголовок> <div class=navbar-header> <button class=navbar-toggle свернутое type=button data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> Переключить навигацию</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Net Library</a> </div> <div class=navbar-collapse свернуть role=navigation> <div style=margin-top:15px;margin-left:120px; позиция:абсолютная;><span style=color:white;padding-top:20px;>XXXXX</span></div> <ul class=nav navbar-nav></ul> <ul class=nav navbar-nav navbar-right> <li> <a href=/Blog.html>Блог</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>Управление веб-сайтом</a></li> </ul> </div> </template > <template id=doc_tags_navbar> <div class=container-fluid style=padding:0px;> <ul class=nav navbar-nav btn-group-sm id=tagbar> <li><a style=font-weight:bold; padding-bottom:6px;padding-top:6px; href=/index.html>Домашняя страница</a></li> <li v-for=item в данных><a v- привязка: заголовок = элемент.Примечание стиль = шрифт-вес: жирный; отступ-нижний: 6 пикселей; отступ-верхний: 6 пикселей; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; tagbarControl = new Vue({ el: '#tagbar', data: { Data: [] } }); асинхронная функция ListDocTags() { var result = await $ListDocTags(); tagbarControl.Data = result.Data } ListDocTags(); </template><templates>;

Определите блок шаблона с помощью тега шаблона, а затем определите уникальный идентификатор для каждого блока. Некоторые студенты могут спросить, что шаблон не является допустимым тегом HTML, так что же с этим делать? Правильный браузер шаблонов не может справиться с этим, но JQuery может. На данный момент, я думаю, некоторые студенты понимают этот принцип.

Как ссылаться на него в HTML после того, как модуль определен? На самом деле HTML не поддерживает такую ​​функцию, но мы можем определить некоторые пользовательские атрибуты HTML, которые будут интерпретироваться JQuery. Здесь мы определяем атрибут слота для указания идентификатора шаблона.

 <div class=navbar navbar-inverse navbar-fixed-top> <div class=container slot=header> </div> </div> <nav class=navbar navbar-default style=padding:0px;margin:0px;min -height:0px; слот=doc_tags_navbar> </nav>

Шаблон определен, а также указан HTML-код страницы. Далее их необходимо интегрировать. На данный момент, я думаю, друзья, знакомые с JQuery, уже поняли, что делать :)

Для JQuery вы можете загрузить страницу общедоступного модуля и преобразовать ее в DOM, а затем заменить элементы слотами, определенными на странице.

 function ModuleLoad(url) { $.get(url, function (result) { var html = $(result); var __templates = html; $([slot]).each(function () { var id = $(this) .attr('slot'); var body = $(__templates).find('#' + id).html(); $(this).html(body); }); });}$(document).ready(function () { ModuleLoad(/PublicModule.html);});

Код прост и эффективен. Сохраните весь скрипт в файл, затем добавьте его на страницу, и он загрузится автоматически.

Будет ли теперь HTML-страница, которую можно загрузить за один раз, требовать загрузки Ajax? Не приведет ли это к медленной загрузке? Фактически, вы можете использовать стратегию локального кэширования для HTML-страниц общедоступного модуля, чтобы все страницы можно было получать непосредственно из локального модуля при загрузке модуля, поскольку общедоступная часть извлекается, накопление связанных страниц становится меньше и; скорость загрузки выше.

Тем, кто привык использовать механизмы представления на стороне сервера, может быть немного сложно полностью использовать модель внешней разработки HTML/JS. Но интерфейсная разработка, полностью основанная на HTML/JS, имеет очевидные преимущества. Обработка представлений не требует сервисной интерпретации, что значительно снижает потери на сервере. HTML может лучше выполнять локализованное кэширование, и сейчас существует большое количество HTML/JS-фреймворков, которые это позволяют. Вам написать Это легче и проще.

Вышеупомянутый редактор представляет вам метод реализации модульной загрузки традиционных HTML-страниц. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя!