Comment implémenter le chargement modulaire de pages HTML traditionnelles

Pour les sites Web, il existe un grand nombre de modules partagés entre plusieurs pages, comme les en-têtes, les pieds de page, les colonnes utilisateur, etc. Pour les frameworks dotés de moteurs d'affichage back-end, ces partages sont relativement faciles à extraire. Par exemple, asp.net mvc possède une mise en page unifiée MasterPage, @Section et d'autres fonctions qui peuvent partager des fonctions de modèle d'affichage. Mais pour le HTML, vous n'avez pas cette chance. Ces fonctions ne sont pas disponibles dans les fichiers HTML, donc lorsque vous utilisez des pages HTML pures pour écrire des sites Web d'applications, vous devrez peut-être faire face à ces tâches répétées, même si vous pouvez imbriquer des IFrames pour y parvenir. cette méthode de mise en œuvre n’est ni idéale ni conviviale.

Récemment, j'ai implémenté un site Web basé sur mon propre framework. Comme le framework n'a pas de moteur de visualisation back-end, j'ai rencontré ce genre de problème... Jetons d'abord un coup d'œil à la situation réelle.

Les deux pages HTML ci-dessus sont uniques, à l'exception de la partie principale, et les autres blocs de données sont les mêmes. S'il n'y a pas de moteur de visualisation back-end, qu'en pensez-vous... Au début, chaque modification doit être synchronisée avec les autres pages. Plus tard, j’ai découvert que faire cela me conduirait définitivement à la mort. Après avoir réfléchi un moment, j'ai trouvé une solution.

Après y avoir réfléchi, j'ai découvert que le modèle public pouvait être extrait dans un fichier HTML (le nom du fichier est provisoirement nommé PublicModule.html), comme suit :

 <templates> <template id=header> <div class=navbar-header> <button class=navbar-toggle collapse type=button data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> Basculer la navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Bibliothèque Net</a> </div> <div class=navbar-collapse cliff role=navigation> <div style=margin-top:15px;margin-left:120px; position:absolue;><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>Gestion du site Web</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>Page d'accueil</a></li> <li v-for=élément dans les données><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; tagbarControl = new Vue({ el: '#tagbar', data: { Data: [] } }); var result = wait $ListDocTags(); tagbarControl.Data = result.Data; ListDocTags();

Définissez un bloc modèle via la balise modèle, puis définissez un ID unique pour chaque bloc. Certains étudiants peuvent se demander que le modèle n'est pas une balise HTML valide, alors comment y remédier ? Le bon navigateur de modèles ne peut pas le gérer, mais JQuery le peut. À ce stade, je pense que certains étudiants comprennent le principe.

Une fois le module défini, comment le référencer en HTML ? En fait, HTML ne prend pas en charge une telle fonction, mais nous pouvons définir certains attributs personnalisés pour que HTML soit interprété par JQuery. Ici, nous définissons un attribut slot pour spécifier l'ID du modèle.

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

Le modèle est défini et le HTML de la page est également référencé. Il faut ensuite les intégrer. À ce stade, je pense que les amis qui connaissent JQuery doivent avoir compris quoi faire :)

Pour JQuery, vous pouvez charger la page du module public et la convertir en DOM, puis remplacer les éléments par des emplacements définis sur la page.

 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(); }); });}$(document).ready(function () { moduleLoad(/PublicModule.html);});

Le code est simple et efficace. Enregistrez l'intégralité du script dans un fichier, puis ajoutez-le à la page et il se chargera automatiquement.

La page HTML qui peut être chargée en une seule fois nécessitera-t-elle désormais un chargement Ajax ? Cela ne ralentira-t-il pas le chargement ? En fait, vous pouvez utiliser une stratégie de cache local pour les pages HTML du module public, afin que toutes les pages puissent être récupérées directement depuis le local lors du chargement du module car la partie publique est extraite, l'accumulation de pages associées devient plus petite et ; la vitesse de chargement est plus rapide.

Pour ceux qui sont habitués à utiliser des moteurs de visualisation côté serveur, il peut être un peu difficile d'utiliser pleinement le modèle de développement frontal HTML/JS. Mais le développement front-end entièrement basé sur HTML/JS présente des avantages évidents. Le traitement des vues ne nécessite pas d'interprétation de service, ce qui réduit considérablement les pertes du serveur. HTML peut effectuer une meilleure mise en cache localisée, et il existe désormais un grand nombre de frameworks HTML/JS qui le permettent. à vous d'écrire C'est plus facile et plus simple.

Ce qui précède est la méthode que l'éditeur vous présente pour implémenter le chargement modulaire des pages HTML traditionnelles. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps !