Como implementar o carregamento modular de páginas HTML tradicionais

Para sites, há um grande número de módulos compartilhados entre muitas páginas, como cabeçalhos, rodapés, colunas de usuário, etc. Para estruturas com mecanismos de visualização de back-end, esses compartilhamentos são relativamente fáceis de extrair. Por exemplo, o asp.net mvc possui layout unificado MasterPage, @Section e outras funções que podem compartilhar funções de modelo de visualização. Mas para HTML, você não tem tanta sorte. Essas funções não estão disponíveis em arquivos HTML, portanto, ao usar páginas HTML puras para escrever sites de aplicativos, você pode ter que enfrentar essas tarefas repetidas, embora possa aninhar IFrames para conseguir, mas. este método de implementação não é ideal e amigável.

Recentemente, implementei um site baseado em meu próprio framework. Como o framework não possui um mecanismo de visualização de back-end, encontrei esse tipo de problema... Vamos primeiro dar uma olhada na situação real.

As duas páginas HTML acima são exclusivas, exceto a parte principal, e os outros blocos de dados são iguais. Se não existe um mecanismo de visualização back-end, o que você acha de fazer isso... No início, cada modificação deve ser sincronizada com outras páginas. Mais tarde descobri que fazer isso definitivamente me levaria à morte. Depois de pensar um pouco, encontrei uma solução.

Depois de pensar sobre isso, descobri que o modelo público pode ser extraído em um arquivo HTML (o nome do arquivo é provisoriamente denominado PublicModule.html), da seguinte maneira:

 <modelos> <template id=header> <div class=navbar-header> <botão class=navbar-toggle recolhido type=button data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> Alternar navegação</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-collapselapse role=navigation> <div style=margin-top:15px;margin-left:120px;posição:absoluta;><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>Blog</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>Gerenciamento de sites</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>Página inicial</a></li> <li v-for=item em dados><a v- bind:title=item.Remark style=font-weight:bold;padding-bottom:6px;padding-top:6px; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; new Vue({ el: '#tagbar', dados: { Dados: [] } }); var resultado = aguarda $ListDocTags(); tagbarControl.Data = resultado.Data } ListDocTags();

Defina um bloco de modelo por meio da tag de modelo e, a seguir, defina um ID exclusivo para cada bloco. Alguns alunos podem perguntar que o modelo não é uma tag HTML válida, então como lidar com isso? O navegador de modelo correto não consegue lidar com isso, mas o JQuery consegue. Neste ponto, acredito que alguns alunos entendem o princípio.

Depois de definido o módulo, como referenciá-lo em HTML? Na verdade, o HTML não suporta tal função, mas podemos definir alguns atributos personalizados para HTML a serem interpretados pelo JQuery. Aqui definimos um atributo de slot para especificar o ID do modelo.

 <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 -altura:0px;slot=doc_tags_navbar> </nav>

O template é definido e o HTML da página também é referenciado. Em seguida, eles precisam ser integrados. Neste ponto, acredito que amigos familiarizados com JQuery devem ter descoberto o que fazer :)

Para JQuery, você pode carregar a página do módulo público e convertê-la em DOM e, em seguida, substituir os elementos pelos slots definidos na página.

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

O código é simples e eficaz. Salve o script inteiro em um arquivo, adicione-o à página e ele será carregado automaticamente.

A página HTML que pode ser carregada de uma só vez agora exigirá o carregamento do Ajax. Isso não causará carregamento lento? Na verdade, você pode usar uma estratégia de cache local para as páginas HTML do módulo público, para que todas as páginas possam ser buscadas diretamente do local ao carregar o módulo, pois a parte pública é extraída, o acúmulo de páginas relacionadas torna-se menor; a velocidade de carregamento é mais rápida.

Para aqueles que estão acostumados a usar mecanismos de visualização do lado do servidor, pode ser um pouco difícil usar totalmente o modelo de desenvolvimento front-end HTML/JS. Mas o desenvolvimento front-end baseado inteiramente em HTML/JS tem vantagens óbvias. O processamento de visualização não requer interpretação de serviço, o que reduz muito as perdas do servidor. O HTML pode fazer um cache melhor localizado, e agora há um grande número de estruturas HTML/JS que permitem. você escrever É mais fácil e simples.

O método acima é o método que o editor apresenta para implementar o carregamento modular de páginas HTML tradicionais. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo.