浅谈模板引擎

浅谈模板引擎

1、项目情况

最近工作需要将 html 静态页面对接后端接口，由于后端是采用 ssm 架构的 web 项目，后台静态界面转为 jsp 页面集成。所以，PC端页面只能转为 jsp（配置了页面跳转 ，除非做 jsp 和 thymeleaf 整合，或者和其他模板引擎整合，通过配置不同的 SpringMVC 解析器，否则只能以文件类型只能是 JSP ）。

2、技术选型

大概思路浏览器请求Controller，返回一个数据对象（后端接口自己开发的，前后分离思想，所以没有返回视图）；前端视图就是使用模板引擎，在页面创建或更新的时候直接用 ajax 请求获取数据对象，在模版中引入填充数据（PC 前台页面，大部分只需要调用接口获取数据）然后。

2.1、Thymeleaf 、Velocity、Freemarker三个模板引擎

Thymeleaf
它是boot里面自带的。他类似 Vue 和 Angluar 的指令，并不是真正的静态模板引擎。所以对有前端团队的，不建议使用。

Velocity
静态模板引擎。类似的 JSP 语法，能多级编译，但文件名必须为 vm。配置麻烦。层次级别不太好看。适合从事过 JSP 人员的使用。

Freemarker
静态模板引擎。类似标签语法，强力建议使用。不支持多级编译(这是硬伤,同时也是有效的保护了代码。)

刚开始，页面转为jsp，增加命名空间，其余和html一样。接下来，就是模板引擎的重头戏了，如何将数据填充到页面。可以用jQuery选中各个dom节点的值，然后组装成后台接口中需要的Form，再用ajax请求后台，这种方式的缺点在于，如果数据字段比较多，需要手动选择很多个dom节点，再取值，想想都可怕。
由于 JSP 混合后端代码的形式比较反感，而且使用 jsp 的一些功能需要 java 一起配合，个人还是偏向前后端分离。虽说是项目是集成在一起的，还需要转为 jsp；但是后端没办法更改，前端还有操作空间。

2.2、前端框架

2.2.1 art-temeplate.js

java 后端开发者做后台管理系统，用模版技术还是挺方便的；但是如果在页面上对数据进行修改，如何快速高效的解决呢？
由于笔者好久没有做过 Web 的项目，记得刚学习前端使用的是 art-temeplate.js 模板，先将静态页面需要数据填充的元素封装起来通过做成模板，通过 art-temeplate 特有语法将数据填充到模板，在将整个模板作为 html 元素，插入到指定 id 的容器中。

踩到的一些坑

1. 页面需要数据的元素太多，导致抽取好多个模板块，破环代码的顺序，可读性差，编写代码也比较麻烦。
2. 因为 art-temeplate 框架是 DOM驱动的，操作的是 html 元素。这就导致页面没有加载完成时，无法在模板元素上取得数据，而页面要根据选项卡的属性来查询数据，这就需要在 ajax 第一次请求完成时（获得类型填充选项卡），回调函数中调用第二个 ajax 请求（根据类型获取数据）。
3. 同第二条，如果页面在请求调用之前渲染完成，那么页面没有数据填充；如果页面在请求之后渲染完成，则页面渲染时无法获得模板中的数据。

2.2.2 Vue

想到之前学习过 Vue（art-temeplate 是 vue 之前的技术），知道了数据的双向绑定，现在很火的 AngularJS 也是跟 Vue.js 差不多，支持双向绑定。但是公司项目不是用的前后端分离，没有搞两套部署，主要是对前端部署那些也不熟悉。那笔者就想在 JSP 页面中引入vue.js 静态文件，来使用数据双向绑定功能，这样就不用再用 jQuery 去选择 dom 节点了。

大概思路浏览器请求 Controller，返回一个数据对象；在模版中引入Vue.js，将获得数据通过绑定传到页面元素上；将页面上需要提交的数据绑定到Vue的对象中的数据上，然后在创建或更新的时候直接用ajax请求把这个Vue对象中的数据传给后端。

优点：

1. 不需要操作 DOM，编码方便，页面渲染速度快，代码可读性高；
2. 数据双向绑定，可以计算；
3. vue.js 文件方便下载，官网直接可以找到。

缺点：

2. 需要学习框架，对没有接触过 Vue 的开发人员不适用。

官网引用：

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

3 总结

决定明天使用 Vue 对静态页面进行重构，一定可以提升开发效率。
在工作中总结经验，对自身的技术栈也进行重构。技术选型上也有一些思考方向，即使抛弃一些落后的技术，将精力用在技术提升。