Cómo implementar la carga modular de páginas HTML tradicionales

Para los sitios web, existe una gran cantidad de módulos compartidos entre muchas páginas, como encabezados, pies de página, columnas de usuario, etc. Para marcos con motores de vista de fondo, estos recursos compartidos son relativamente fáciles de extraer. Por ejemplo, asp.net mvc tiene un diseño unificado de MasterPage, @Section y otras funciones que pueden compartir funciones de plantilla de vista. Pero para HTML, no tiene tanta suerte. Estas funciones no están disponibles en archivos html, por lo que cuando usa páginas HTML puras para escribir sitios web de aplicaciones, es posible que tenga que enfrentar estas tareas repetidas, aunque puede anidar IFrames Para lograrlo. Este método de implementación no es ideal ni amigable.

Recientemente, implementé un sitio web basado en mi propio marco. Dado que el marco no tiene un motor de vista de fondo, encontré este tipo de problema... Primero echemos un vistazo a la situación real.

Las dos páginas HTML anteriores son únicas excepto la parte principal y el resto de bloques de datos son iguales. Si no hay un motor de vista de fondo, ¿qué te parece hacerlo? Al principio, cada modificación debe sincronizarse con otras páginas. Más tarde descubrí que hacer esto definitivamente me llevaría a la muerte. Después de pensar un rato, se me ocurrió una solución.

Después de pensarlo, descubrí que la plantilla pública se puede extraer en un archivo HTML (el nombre del archivo se llama provisionalmente PublicModule.html), de la siguiente manera:

 <plantillas> <ID de plantilla=encabezado> <div clase=encabezado de barra de navegación> <clase de botón=cambio de barra de navegación tipo contraído=botón alternancia de datos=contraer destino-datos=.colapso de barra de navegación> <clase de intervalo=solo sr> Alternar navegación</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 colapso role=navegación> <div estilo = margen superior: 15 px; margen izquierdo: 120 px; posición: absoluta; >< intervalo 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>Administración de sitios 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>Página de inicio</a></li> <li v-for=elemento en datos><a v- bind:título=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', datos: { Datos: [] } }); función asíncrona ListDocTags() { var resultado = esperar $ListDocTags(); tagbarControl.Data = resultado.Data } ListDocTags() </script> </template><templates>

Defina un bloque de plantilla a través de la etiqueta de plantilla y luego defina una ID única para cada bloque. Algunos estudiantes pueden preguntar que la plantilla no es una etiqueta HTML válida, entonces, ¿cómo solucionarlo? El navegador de plantilla correcto no puede manejarlo, pero JQuery sí. En este punto, creo que algunos estudiantes entienden el principio.

Una vez definido el módulo, ¿cómo hacer referencia a él en HTML? De hecho, HTML no admite dicha función, pero podemos definir algunos atributos personalizados para que JQuery los interprete. Aquí definimos un atributo de ranura para especificar el ID de la plantilla.

 <div class=barra de navegación barra de navegación-barra de navegación inversa-parte superior fija> <div class=container slot=header> </div> </div> <nav class=barra de navegación barra de navegación-default style=padding:0px;margin:0px;min -altura:0px; ranura=doc_tags_navbar> </nav>

Se define la plantilla y también se hace referencia al HTML de la página. A continuación, es necesario integrarlos. En este punto, creo que los amigos que están familiarizados con JQuery deben haber descubierto qué hacer :)

Para JQuery, puede cargar la página del módulo público y convertirla en DOM, y luego reemplazar los elementos con ranuras definidas en la página.

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

El código es simple y efectivo. Guarde el script completo en un archivo, luego agréguelo a la página y se cargará automáticamente.

¿La página HTML que se puede cargar de una vez ahora requerirá carga Ajax? De hecho, puede utilizar una estrategia de caché local para las páginas HTML del módulo público, de modo que todas las páginas se puedan recuperar directamente del local al cargar el módulo, ya que se extrae la parte pública y la acumulación de páginas relacionadas se vuelve más pequeña; la velocidad de carga es más rápida.

Para aquellos que están acostumbrados a utilizar motores de visualización del lado del servidor, puede resultar un poco difícil utilizar por completo el modelo de desarrollo front-end HTML/JS. Pero el desarrollo front-end basado completamente en HTML/JS tiene ventajas obvias. El procesamiento de vistas no requiere interpretación del servicio, lo que reduce en gran medida las pérdidas del servidor. HTML puede realizar un mejor almacenamiento en caché localizado, y ahora existe una gran cantidad de marcos HTML/JS que lo permiten. escribir es más fácil y sencillo.

Lo anterior es el método que le presenta el editor para implementar la carga modular de páginas HTML tradicionales. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo.