本文主要介绍传统HTML页面模块化加载的相关知识。 非常好html模块化，有一定的参考价值。 有需要的同学可以参考以下
对于网站来说，很多页面之间存在大量的共享模块，例如页眉、脚注、用户栏等。 对于具有前端视图引擎的框架来说，这种共享是相对容易提取的。 例如asp.netmvc有统一布局的MasterPage、@Section等功能，可以共享视图模板功能。 但对于 HTML 来说就没那么幸运了，html 文件中没有这样的功能，所以当你使用纯 HTML 页面来编写应用网站时，你可能要面对这种重复性的工作，虽然你可以将 IFrame 的方法设置为实现了，但是这些实现方式都不够理想和友好。
实景分析
最近有一个网站基于自己的框架实现，由于框架没有前端视图引擎，所以遇到了这些麻烦……先来看看实际情况。
上述两个HTML页面不仅核心部分是唯一的，其他数据块也是相同的。 如果你没有前端视图引擎html模块化，你会想到怎么做……一开始，每次改变都要同步到其他页面。 后来我意识到，这样的做法肯定会杀了我。 想了一会儿，我想出了一个解决办法。
公共模板定义
想了想，发现可以将公共模板提取成一个HTML文件（文件名暂定为PublicModule.html），如下：
通过模板标签定义一个模块蓝片，然后为每个块定义一个唯一的ID。 有同学可能会问，模板不是有效的HTML标签，那怎么处理呢？ 正确的模板浏览器无法处理它，但 JQuery 可以。 相信有的朋友明白这里的原理了。
在 HTML 中应用模板
模块定义好之后，如何在HTML中引用它呢？ 虽然HTML不支持这样的功能，但是我们可以为HTML定义一些自定义属性来解释给JQuery。 这里定义了一个slot属性来指定模板ID
模板定义好了，页面的HTML也引用好了，然后就必须将它们集成起来。 到了这里，相信熟悉JQuery的同事一定已经想到要做什么了:)
与 JQuery 集成加载
对于JQuery，可以加载公共模块页面并转换为DOM，然后用页面上定义的槽替换元素
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页面模块化加载的方法。 希望对您有所帮助。 如果有疑问请给我留言，小编会及时回复您！
