关于模版引擎

有没有 V 友能给外行解释一下什么叫做模版引擎？

找了一些资料：

比如 Thymeleaf 这个不知道该怎么称呼的东西（有的叫框架，有的叫模版引擎，有的直接叫做“库”）

进官网看了看， Thymeleafis a modern server-side Java template engine for both web and standalone environments

找到个关键字 “服务端模版引擎”

继续搜索一下，发现还有前端模版引擎和后端模版引擎一说

当面问了一个 java 开发人员也没能讲清楚模版引擎是个什么东西，有哪些关键的作用和特性

希望 V 友能够指点一下

clino

2017-02-10 16:35:30 +08:00

后端模板比如我用的 uliweb 可以在 html 里嵌入 python 代码: http://limodou.github.io/uliweb-doc/zh_CN/template.html ,这样动态的网页就比较好实现了当然这个在最好的语言本来就有了, 后端模板的执行是在服务端完成的

前端模板比如我用的 avalonjs 可以在 html 里用专门定义的指令组件等等来达到运行时的动态执行: http://avalonjs.coding.me/directive.html ,前端模板的执行是在浏览器端完成的

misaka19000

2017-02-10 16:39:06 +08:00

就是本来你要生成一个网页，需要自己去拼装，很不好用。

模板引擎可以帮助你快速生成网页，比如你要在网页上生成一个列表，以前要自己写循环，然后把这些 HTML 的源码拼起来，现在只要把这个列表放到模板引擎里面就可以，提升了开发效率，代码也变得整洁了。

不过我还是认为前后端纯粹的分离才是正道（逃

andyL

2017-02-10 16:42:02 +08:00

@clino 谢谢啊，没做过这方面的开发，没什么具体概念，你说的属于具体实例了，有点难度😄。。
能不能这么理解：模版这个东西是用来实现 MVC 三层的分离的，将 View 的数据更新操作所需的数据全部打包，在后端 java 代码中通过模版指定的语法将前面打包的各个数据与 java 中的数据对象绑定的一种快捷操作？

ss098

2017-02-10 16:42:25 +08:00

模版引擎就是把数据填充到一个大字符串中的指定位置，可以做一些简单的逻辑操作（ if ， foreach 等）。

前端和后端模版引擎的区别就是：做填充数据、逻辑操作的这一步是在前端还是后端完成的。

https://laravel-china.org/docs/5.3/blade

给你一个最好的语言的模版引擎，我觉得它思路清晰。

andyL

2017-02-10 16:43:55 +08:00

@misaka19000 这个例子不错，有点概念了。有前端模版引擎和后端模版殷勤一说吗？你说的是属于哪一种？

clino

2017-02-10 16:54:50 +08:00

@andyL 模板引擎就是生成动态页面的一个方法,后端语言可以从后端(如数据库)获取到状态,所以可以由后端语言生成 html,但完全靠后端语言自己拼 html 太麻烦,就搞个模板引擎,这样在 html 里可以直接调用后端语言生成部分 html,其他固定的 html 就直接在模板文件里写死

前端模板也是类似,它的状态可以在 javascript 里存放,也可以由 javascript 调用后端 api 获得,此时也有同样的问题,完全由前端 js 生成 html 是可行的,但是太麻烦不好维护,所以又搞出了前端模板

bianhua

2017-02-10 17:00:16 +08:00

> 有没有 V 友能给外行解释一下什么叫做模版引擎？

模板引擎指的是一种根据特殊语法或者模式（ Pattern ），通过预设规则生成内容的转换程序。

比如 Thymeleaf 是一种使用 Java 编写的 HTML 模板引擎。它可以解析并处理 HTML 中的代码，并通过这些代码来调用 Java 中的预设函数或数据来产生新的 HTML 内容。

andyL

2017-02-10 17:00:28 +08:00

@clino 大概清楚是个什么东西了，非常感谢。

cszeus

2017-02-10 17:03:21 +08:00

举个例子讲讲我个人的理解。

比如说，你看到的网页，其实就是一个很大的<html>xxxxx</html>文档。只要有了这个文档，浏览器就能显示页面。在以前网站都是静态的时候，服务器都直接把这个写好的 html 发给你。后来，网站复杂了，大家发现一个页面一个 html 不行，太累了，而且很多页面其实主要部分是一样的，中间有一些不一样。结果大家想出来的方法就是用代码生成，比如 html = '<html>' + customer+'</html>'。根据 customer 的不同，可以生成不同的 html 。

再后来，发现这么写代码拼出来还是太麻烦了，而且控制逻辑跟负责显示的 html 耦合很严重，就发明了模板引擎。我定义个模板，比如长这样：<html>{customer}</html>。其中{customer}也是个变量。当然，这个模板可以很长，很复杂，带很多变量。我现在要做的，就是告诉模板引擎我想用哪个模板，其中变量的值分别是多少，它就可以自动给我生成 html 了。这里，模板只负责展示，你的代码可以通过各种逻辑获得变量的值，让模板引擎去渲染，就解耦了。

前后端模板引擎，对我来说，就是服务器渲染出 html 直接返回给浏览器，还是服务器传值回来，由前端的 js 生成 html 的区别吧。

andyL

2017-02-10 17:05:28 +08:00

@bianhua 噢，那么使用 Thymeleaf 模版引擎的项目，只会前端的人想根据新的设计图重新写一下前端 UI 能搞定吗？
就是完全不会 java 代码的， eclipse 都不会用，打开工程啥都看不懂的，更不能写业务逻辑的前端人员能直接只修改 UI 吗？😓💦

cszeus

2017-02-10 17:07:10 +08:00

@andyL 可以的

andyL

2017-02-10 17:08:39 +08:00

@cszeus 噢😯？直接修改 tomcat 服务器上的 www 文件夹下面的 html 源码中的样式就行了嘛？

misaka19000

2017-02-10 17:15:17 +08:00

@andyL 后端模板引擎的话就是在后端把网页生成好了然后再发给前端；前端模板引擎就是后端只发数据，前端使用 JS 把获取到的数据渲染在页面上，就酱~

andyL

2017-02-10 17:18:06 +08:00

@misaka19000 在前面的讨论基础上，你这个总结显得异常地简洁明了！😄

bianhua

2017-02-10 17:19:21 +08:00

@andyL

短答案：是的。事实上这就是模板引擎存在的意义——让前端不需要担心后端那些复杂的逻辑，只需要处理手头上这些后端给到的数据就行了。这样前端的工作负担就能大大减轻了。

长答案：这需要看你如何安排你的项目，以及新的设计是否引入了需要后端一起变更的功能。

我没有用过这个模板引擎，但我看了下它的文档，感觉跟大多数模板引擎套路一致：分配或者映射一个变量，把它交给模板引擎，模板引擎根据模板语法解析出那个变量，将变量（或变量解析后的）内容填充到页面上。

你看，模板引擎得到的变量都是后端给的，前端自己不能“得到”这些东西。所以如果你的前端需要得到这些数据，就需要后端将数据“给”前端（虽然在实际意义上是同一个程序）。

但是如果前端的变更无需调用新的数据，那么大体上就不需要后端参与 UI 更新了。

andyL

2017-02-10 17:20:28 +08:00

@bianhua 逻辑清晰，语句通顺，哈哈。感谢🙏

seeker

2017-02-10 17:23:32 +08:00

数据+模版->带格式的数据
模版引擎就是做转换的那一步。

tedzhou1221

2017-02-10 17:34:25 +08:00

简单点：就跟 ppt 模版一样，在模版上加上自定义的数据或文字内容等。

我比较喜欢用 freemark

publicAdmin

2017-02-10 23:58:26 +08:00

@misaka19000 之前看 JD 某大神分享的文章，有提到他们在 JD 商品页面大量使用了模板引擎，为了让前端更快速的响应加载。 JD 这种体量的系统，也用模板引擎，是不是代表绝对的前后端分离也只是理想化的？

misaka19000

2017-02-11 00:27:27 +08:00

@publicAdmin 事实上这种电商网站由于活动特别多，所以一般反而会大量使用前后端分离。不考虑京东的主站，京东在一些小型的活动页面上经常会使用纯粹的前后端分离策略，因为这样一来后端只需要提供接口，相对变化较小，而前端则可以非常灵活。总之还是一句话：根据需求而定自己使用什么样的策略。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/339590

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.