一、前言
相信很多小伙伴在学习拆解页面模板的时候，都会遇到一个头疼的问题，那就是看着模板密密麻麻的页面标签，该如何下手，怎么将页面模板拆分、修改成自己想要的样子，在这就给大家介绍一个比较实用的方法：将页面碎片化，模块化实现。
二、模板拆分
再拆分模板前，首先了解下，什么是碎片化和模块化，碎片化就是将模板页面的每个部分抽取出来，例如一个模板页面有头部，左边菜单栏部分，中间的可变内容部分，底部等，将这些称为“碎片”，将他们分别抽取出来，然后再通过自定义的一个碎片组装器index.html组装即可。
模块化就是根据功能不同，将页面也进行分包治理，也就是说根据页面的功能的不同，分别放到自定义的包下，方便管理；
例如：templates下面的账户模块，用来存放login.html,register.html等账户功能相关的页面模块，common公共模块，存放一些异常同一管理的页面，还有fragements存放页面碎片的模块等等，都可以根据功能自定义。
碎片化拆分：
1、分析并将页面的公共部分提取出来，每个页面可能有所不同，这里只讲方法，例如一个页面，他有头部，左边菜单栏，中间内容部分，底部等，将这些公共部分提取出来。
2、用文本编译器打开网页源代码；分析并找到各个公共的模块对应的代码：
3、将各个公共碎片的代码提取出来，复制到对应的HTML文件里面，所有碎片放到fragements模块里面，方便管理：
4、自定义一个碎片组装器，这里是index.html，然后将碎片组装到里面，碎片组装器就是一个框架，里面有<head>、<body>,以及移植要用到的静态资源文件。
5、思考一个问题，中间可变部分 如何渲染？
中间会变化的区的渲染：由于中间变化的区域后期是可以根据需求变化的，所以不可能随着他变化一次来修改一次组装器，很麻烦，所以可以在控制器controller层里用modelMap包装一个特殊变量"template",以及文件路径，然后碎片组装器调用${template}即可,例如：
6、组装：将页面的各个部分分别组装到碎片组装器index.htnl里面，中间可变部分在 碎片组装器只要判断template是否存在，存在则替换，不存在则忽略：
7、最后组装完成后的效果：
三、总结
通过将模板页面的各个公共部分进行碎片化拆分出来，然后进行组装，可以让我们在拆分繁杂的模板的时候，有一个清晰的思路，而且后期的可维护性也会更好，大家可以借鉴这种思路来拆分页面，然后进行组装。
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
