模板引擎

模板引擎 起到 数据和视图分离的作用， 模板对应视图， 关注如何展示数据， 在模板外头准备的数据， 关注那些数据可以被展示。

后端模板引擎

freemarker

如下介绍，  java后台的模板引擎， freemark介绍，其图能很好标明这种关系。

http://freemarker.org/

Apache FreeMarker is a template engine: a Java library to generate text output (HTML web pages, e-mails, configuration files, source code, etc.) based on templates and changing data. Templates are written in the FreeMarker Template Language (FTL), which is a simple, specialized language (not a full-blown programming language like PHP). You meant to prepare the data to display in a real programming language, like issue database queries and do business calculations, and then the template displays that already prepared data. In the template you are focusing on how to present the data, and outside the template you are focusing on what data to present.

velocity

另外一个 java模板引擎， velocity：

http://velocity.apache.org/

velocity是一个基于java的模板引擎， 它允许任何人使用简单但是强大的 模板语言， 引用 java代码中的对象。

Velocity is a Java-based template engine. It permits anyone to use a simple yet powerful template language to reference objects defined in Java code.

按照MVC的思想分离任务， web页面开发者关注如何将页面做的好看， 业务开发者关注写首要的逻辑代码。

其对 JSP代码是一种取代。

When Velocity is used for web development, Web designers can work in parallel with Java programmers to develop web sites according to the Model-View-Controller (MVC) model, meaning that web page designers can focus solely on creating a site that looks good, and programmers can focus solely on writing top-notch code. Velocity separates Java code from the web pages, making the web site more maintainable over its lifespan and providing a viable alternative to Java Server Pages (JSPs) or PHP.

不仅仅可以做HTML模板， 也可以做XML和sql其它重复性代码生成工具。

Velocity’s capabilities reach well beyond the realm of the web; for example, it can be used to generate SQL, PostScript and XML from templates.

前端模板引擎

随着前端技术发展， 和前端处理能力增强， 越来越多的 渲染逻辑在浏览器端实现， 由此出现前端模板引擎， 仿照后台模板引擎方法， 定义前端模板语言， 实现前端模板引擎。

arttemplate

https://github.com/aui/artTemplate

新一代 javascript 模板引擎

编写模板

使用一个type="text/html"的script标签存放模板：

  1. <script id=“test” type=“text/html”>
  2. <h1>{{title}}</h1>
  3. <ul>
  4. {{each list as value i}}
  5. <li>索引 {{i + 1}} ：{{value}}</li>
  6. {{/each}}
  7. </ul>
  8. </script>
渲染模板
  1. var data = {
  2. title: '标签',
  3. list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
  4. };
  5. var html = template('test', data);
  6. document.getElementById('content').innerHTML = html;

演示

示例：  http://aui.github.io/artTemplate/demo/basic.html

arttemplate 性能介绍

http://cdc.tencent.com/2012/06/15/%e9%ab%98%e6%80%a7%e8%83%bdjavascript%e6%a8%a1%e6%9d%bf%e5%bc%95%e6%93%8e%e5%8e%9f%e7%90%86%e8%a7%a3%e6%9e%90/

artTemplate 介绍

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

art-template结合tomjs编译工具效果更佳

https://github.com/aui/tmodjs/

如果在页面中维护很多 <script>模板端段， 则会很庞大， 且解析效率不佳：

此工具允许各个模板独自文件管理， 然后精怪此工具合并压缩， 成为一个可引用的模板文件：

使用默认的格式

TmodJS 默认将整个目录的模板压缩打包到一个名为 template.js 的脚本中，可直接在页面中使用它：

  1. <script src="tpl/build/template.js"></script>
  2. <script>
  3. var html = template('news/list', _list);
  4. document.getElementById('list').innerHTML = html;
  5. </script>

template.js 还支持 RequireJS、SeaJS、NodeJS 加载。示例

指定格式（amd / cmd / commonjs)

此时每个模板就是一个单独的模块，无需引用 template.js：

  1. var render = require('./tpl/build/news/list');
  2. var html = render(_list);

jquery template模板引擎

http://www.cnblogs.com/FoundationSoft/archive/2010/05/19/1739257.html

http://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html

https://github.com/BorisMoore/jquery-tmpl

    <!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery-latest.min.js"></script><script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script></head><body><ul id="movieList"></ul><script>var movies = [{ Name: "The Red Violin", ReleaseYear: "1998" },{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },{ Name: "The Inheritance", ReleaseYear: "1976" }];var markup = "<li><b>${Name}&lt;/b&gt; (${ReleaseYear})</li>";/* Compile the markup as a named template */$.template( "movieTemplate", markup );/* Render the template with the movies data and insertthe rendered HTML under the "movieList" element */$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );</script></body></html>

        </div></div>

前端与后端的模板引擎相关推荐

  1. MVT模型＜-＞前后端不分离前后端分离模板引擎

    一.前后端不分离与前后端分离的比较 前后端不分离特点: 后端需控制数据的展示 前后端不分家,耦合严重 返回的是HTML页面,适应性.拓展性差 只能用于浏览器,其它终端不匹配 前后端分离的特点: 当前主 ...

  2. 前后端交互—模板引擎的使用 过滤器的制作及使用 简易的template制作

    模板引擎的逛网首页及下载使用  template. http://aui.github.io/art-template/zh-cn/docs/ 一.模板引擎的使用 引用, 定义模板 .渲染数据.调用t ...

  3. 前端进击笔记第十二节 掌握前端框架模板引擎的实现原理

    如今说起前端开发,基本上都离不开前端框架.随着前端技术不断迭代,前端框架相关的文档和社区日益完善,前端入门也越来越简单了.我们可以快速上手一些工具和框架,但常常会忽略其中的设计和原理. 对框架和工具的 ...

  4. LayUI模板引擎渲染数据

    前端模板引擎介绍 接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...

  5. ThinkPHP6 模板引擎普通标签中，模板引擎运算符函数，循环标签，判断标签的使用，及一些特殊标签

    ThinkPHP6 模板引擎普通标签中,模板引擎运算符函数,循环标签,判断标签的使用,及一些特殊标签 模板引擎支持普通标签和XML标签方式两种标签定义,分别用于不同的目的: 标签类型 描述 普通标签 ...

  6. Transphporm-另一种模板引擎

    If there is one thing the world needs, it's definitely another PHP template engine! But wait, this o ...

  7. 模板引擎的发展 及 thymeleaf

    一.模板引擎的发展 1.后端模板渲染 前端与后端最初的渲染方式是后端模板渲染,就是由后端使用模板引擎渲染好 html 后,返回给前端,前端再用 js 去操作 dom 或者渲染其他动态的部分. 这个过程 ...

  8. 模板引擎Beet的6大创新点

    为什么80%的码农都做不了架构师?>>>    2011年发布Beetl 0.5的时候,新闻是在Iteye上发布的,老资格程序员可能预料Iteye上会发生什么了,我收到的最多的不是鼓 ...

  9. Vert.x - SpringBoot 整合 vertx 使用 thymeleaf、freemarker 模板引擎

    一.模板引擎 在 SpringMVC 项目中使用模板引擎,使用较多的应该是 thymeleaf 及 freemarker 了吧,虽然现在前后端分离的浪潮已经席卷而来,但对于 SEO 或者 页面静态话来 ...

最新文章

  1. linux的自定义input,Linux Input子系统之第一篇（input_dev/input_handle/input_handler）
  2. vim常用命令总结 （转)
  3. Tomact和MySql搭建android简单服务器
  4. 面向大数据处理应用的广域存算协同调度系统
  5. Beta 冲刺 （4/7）
  6. 华为机试——句子逆序
  7. php字符串函数的运用,php中字符串比较函数使用方法
  8. c语言过磅系统,为什么要用无人值守_自动过磅系统？
  9. mysql 5.6.13-winx64_MySQL-5.6.13 zip解压版的安装与配置教程
  10. 01-3安装离线springsource-tool-suite的时候非常缓慢问题解决方案
  11. LVS DR模型详解
  12. 使用Java生成PDF文件
  13. sob攻略超详细攻略_超详细西安旅游攻略
  14. python中search用法_Python中的python re.search方法详解
  15. 邮件服务器专用术语,邮件群发中的常见术语
  16. Python 自动化办公-玩转 Word
  17. 2021年危险化学品经营单位安全管理人员复审考试及危险化学品经营单位安全管理人员模拟考试
  18. LTE学习：PHICH（二）
  19. 基于回旋曲线的平行泊车路径规划
  20. Essentially No Barriers in Neural Network Energy Landscape

热门文章

  1. element Dialog title字体大小
  2. XXX.EXE已停止工作
  3. cocos2d 丢失MSVCR110.dll
  4. 《DeepLearning.ai》第六课：优化算法(Optimization algorithms)
  5. NX二次开发-UFUN获取当前工作部件tag UF_ASSEM_ask_work_part
  6. springboot+poi导出指定格式Excel模板详解+Demo
  7. 数学建模【嫦娥三号软着陆轨道设计与控制策略】
  8. python能做什么兼职好-学会python可以做哪些兼职？
  9. 聚星Note01 - 后台管理环境搭建(1)
  10. 使用Rviz完成摄像头（camera）的视频采集