怎么在HTML页面中实现模块化加载
这篇文章给大家介绍怎么在HTML页面中实现模块化加载，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
公共模板定义
思考后发现可以把公共模板抽取到一个HTML文件中（文件名就暂定PublicModule.html），如下：
<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">博客</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 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>
通过template标签来定义一个模板块，然后针对每个块定义一个唯一ID。可能有些同学会问template并不是有效的HTML标签，那怎处理里呢？对的template浏览器是不会处理，但JQuery是可以，说到这里相信有此同学理解原理了。
在HTML中应用模板
当模块定义后，那在HTML中怎么引用呢？其实HTML并不支持这样的功能，不过我们可以给HTML定义一些自定义属性给JQuery解释，在这里定义了一个slot属性用于指定模板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>
模板定义了，页面的HTML也引用了，接下来就要整合他们。到了这里相信熟悉JQuery的朋友一定想到要怎么做了：）
使用JQuery整合加载
对于JQuery来说可以把公共模块页加载后转成DOM,然后替换页面上定义了slot的元素
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/JS的前端开发有着明显的优势，视图处理不需要服务解释大大降低了服务器的损耗，HTML可以更好地做本地化缓存，还有现在大量的HTML/JS框架让你在编写的时候更轻松简单。
html有什么特点
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
关于怎么在HTML页面中实现模块化加载就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。