HTML拆分与共享方式——多HTML组合技术

作者：私语茶馆

1.应用场景

        如果是一个产品级的Web项目，往往非常多的页面部分是重复的（为保持风格一致），每个HTML页面将这些重复部分重新写一次，既带来极大的工作量，也造成后续修改不便。

        因此会考虑到将一个HTML的不同部分拆分为多个HTML页面，利用类似Include方式包含起来，组成一个新的页面，这样即避免了重复开发，也容易后续修改和维护。

2.HTML页面拆分的方法

        HTML页面拆分有两种典型做法，其一是：iFrame，通过iFrame加载不同的页面，其二是通过JQuery的load方法，来实现页面的组装。

        还有一些企业级Web项目的模块化管理方案，例如利用Freemarker，将HTML模板拆分的技术见：4步完成Web静态化页面案例-Idea Servlet Freemarker-CSDN博客

2.1.通过JQuery加载不同页面部分

        JQuery由约翰·莱西格（John Resig）【罗彻斯特理工学院】开发，JQuery是一个JavaScript框架，可以实现JavaScript的极简开发。利用JQuery将HTML划分为几个部分的步骤如下：

1. 下载jquery框架。下载地址：jQuery3.7.1资源-CSDN文库
2. Web项目中包含该Js文件。
3. 将HTML用<DIV>划分为几个部分，利用JQuery|Load函数加载。

2.1.1.下载JQuery-x.x.x框架

可以在Download jQuery | jQuery网站下载，或者直接从笔者提供的资源下载：