How to implement modular loading of traditional HTML pages

For websites, there are a large number of shared modules between many pages, such as headers, footers, user columns, etc. For frameworks with back-end view engines, these sharings are relatively easy to extract. For example, asp.net mvc has unified layout MasterPage, @Section and other functions that can share view template functions. But for HTML, you are not so lucky. These functions are not available in html files, so when you use pure HTML pages to write application websites, you may have to face these repeated tasks, although you can nest IFrames. To achieve, but this implementation method is not ideal and friendly.

Recently, I implemented a website based on my own framework. Since the framework does not have a back-end view engine, I encountered this kind of trouble... Let's take a look at the actual situation first.

The above two HTML pages are unique except for the core part, and other data blocks are the same. If there is no back-end view engine, what do you think of doing it... In the beginning, every modification must be synchronized to other pages. Later I found out that doing this would definitely drive me to death. After thinking for a while, I came up with a solution.

After thinking about it, I found that the public template can be extracted into an HTML file (the file name is tentatively named PublicModule.html), as follows:

 <templates> <template id=header> <div class=navbar-header> <button class=navbar-toggle collapsed type=button data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> Toggle navigation</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 collapse role=navigation> <div style=margin-top:15px;margin-left:120px; position:absolute;><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>Website Management</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>Homepage</a></li> <li v-for=item in Data><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: [] } }); async function ListDocTags() { var result = await $ListDocTags(); tagbarControl.Data = result.Data; } ListDocTags(); </script> </template><templates>

Define a template block through the template tag, and then define a unique ID for each block. Some students may ask that template is not a valid HTML tag, so how to deal with it? The correct template browser cannot handle it, but JQuery can. At this point, I believe some students understand the principle.

After the module is defined, how to reference it in HTML? In fact, HTML does not support such a function, but we can define some custom attributes for HTML to be interpreted by JQuery. Here we define a slot attribute to specify the template ID.

 <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; slot=doc_tags_navbar> </nav>

The template is defined and the HTML of the page is also referenced. Next, they need to be integrated. At this point, I believe friends who are familiar with JQuery must have figured out what to do:)

For JQuery, you can load the public module page and convert it into DOM, and then replace the elements with slots defined on the 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(); $(this).html(body); }); });}$(document).ready(function () { moduleLoad(/PublicModule.html);});

The code is simple and effective. Save the entire script to a file, then add it to the page and it will load automatically.

Will the HTML page that can be loaded in one go now require Ajax loading? Will it not cause slow loading? In fact, you can use a local cache strategy for the HTML pages of the public module, so that all pages can be fetched directly from the local when loading the module; because the public part is extracted, the accumulation of related pages becomes smaller and the loading speed is faster. .

For those who are used to using server-side view engines, it can be a bit difficult to fully use the HTML/JS front-end development model. But front-end development based entirely on HTML/JS has obvious advantages. View processing does not require service interpretation, which greatly reduces server losses. HTML can do better localized caching, and there are now a large number of HTML/JS frameworks that allow you to write It's easier and simpler.

The above is the method that the editor introduces to you to implement modular loading of traditional HTML pages. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!