freemarker ftl模板_降龙-第6章：模板引擎

直到今天，仍然有很多网站采用iframe作为模板来构建网页。而像React一样的前端框架则是采用了编译打包用加载组件的方式解决模板复用的，这一点跟很多后端语言很像。今天我要讲的是自己研发的模板引擎套件，是内嵌在网站框架中存在的，用不用可以根据开关配置项来决定。

freemarker模板引擎是一款比较流行的插件，用起来也很方便直观，甚至有很多专门为它开发的插件来渲染文档样式，花花绿绿的很好看，而我则是要颠覆它，相比React这样的组件式开发要依赖打包服务器和前端框架支持相对比较重，我决定用最少的代码实现一个轻量级的模板引擎功能。

直接上我最后的模板使用效果图​：

这是我网站的微博系统首页代码，看到里面有很多${uuid}的字符串，这个就是我的模板引擎引入写法了，操作和freemarker一样，在原生的html页面里面写这个视觉冲击效果是最强烈的，因为编译器天然支持对网页的代码样式渲染还不报错，同样的样式和脚本里面也支持这种写法。

来看一下这种写法的最终效果图：

可以从上面两张图看到界面展示效果和代码植入效果，这是数据动态替换，像导航，侧边栏这种分栏设计模板则只需要引入一个网页模板即可，而模板里面的样式和代码只需要模板自己处理好就行，来看一下图片：

可以看到在模板里面也是支持模板的循环嵌套的，只不过不能写成递归套用罢了，上面的截图是网站右侧边栏的网页代码，实际效果如下：​

效果和写法很简单，那么我们来看一下技术实现吧，先上一个代码截图​：

就是这么一个方法把资源请求、网页压缩、浏览器缓存、模板引擎的所有功能都包含进去了，唯独没有实现的是后端渲染，这点我在比较靠后的章节会说到，因为需要先讲自研mvc框架。

整个方法的排版是按照请求接口的频率分布的，网页、样式、脚本、图片、字体，然后在每一种类型的请求里面分别处理压缩和模板替换，得到最终资源后返回输出。

当然现在看来这个思路是比较顺的，那也是我代码重构后的结果，为了结构看起来更加清晰，我把类似处理逻辑的代码都封装成了方法调用了，如下：

可以看到代码都几乎一样，唯独就是脚本压缩我调用的谷歌插件，代码逻辑也比较简单，这样就完成了整个轻量级模板引擎的设计，最后就剩下模板替换的算法了，这里需求简单但是实现起来却相对困难一些，有兴趣可以自己尝试谢谢看，我也没去研究有没有更高效的方法，我用的是一次遍历，算法效率应该不成问题。

整个模板替换的核心就是针对".html"结尾的key做模板替换，其它的做键值对替换，入参map存储的是键值对数据，这个在以后的后端渲染引擎中非常重要。然后算法的实现需要考虑边界值，也就是指针后移的终止问题，在写法上算法是严格要求$和{之间不能有空格的，内部key没有要求。

然后".html"做为模板相比freemarker以".ftl"作为模板在模板源文件预览上效果相差太明显，我写的这个就是跟网页长得一模一样。轻量级模板引擎的开发就这样结束了，代码已上传到github，有兴趣的朋友可以下载参观哈。​