近期看到jstl标签库,联想到以前使用过的artTemplate,感觉两者的用法几近相同,就放在一起总结了。
一、artTemplate的使用
artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。现在就来说一说它的使用:
artTemplate有两种书写形式,一种是原生js模版语法,一种是简洁语法。现在来分别介绍它们:
原生js模版语法
使用之前首先要在页面中加载模版引擎,
1 <script src="dist/template-native.js"></script>
表达式:<% 与%>符号包裹起来的语句则为模板的逻辑表达式。
输出表达式:对内容编码输出:<%=content%>;不编码输出:<%#content%>;
逻辑:原生js模版语法支持使用js语法。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <h1><%=title%></h1> 2 <ul> 3 <%for(i = 0; i < list.length; i ++) {%> 4 <li>条目内容 <%=i + 1%> :<%=list[i]%></li> 5 <%}%> 6 </ul>
虽然原生js模版语法便于理解,但更推荐使用简介语法,
简洁语法
使用之前要引用简洁语法的引擎版本,
1 <script src="dist/template.js"></script>
表达式:{{ 与}}符号包裹起来的语句则为模板的逻辑表达式。
输出表达式:对内容编码输出:{{content}};不编码输出:{{#content}};
条件表达式:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 {{if admin}} 2 <p>admin</p> 3 {{else if code > 0}} 4 <p>master</p> 5 {{else}} 6 <p>error!</p> 7 {{/if}}
遍历表达式:
无论数组或者对象都可以用 each 进行遍历。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 {{each list as value index}} 2 <li>{{index}} - {{value.user}}</li> 3 {{/each}}
亦可以简写成
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 {{each list}} 2 <li>{{$index}} - {{$value.user}}</li> 3 {{/each}}
以上介绍的语法都是常用的,要想了解更多请到artTemplate上查看。
artTemplate常见的错误:
a. 渲染错误(Render Error)
渲染错误一般是因为模板数据错误或者变量错误产生的,渲染的时候只有遇到错误才会进入调试模式重新编译模板,而不会影响正常的模板执行效率。
b.编译错误(Syntax Error)
编译错误一般是模板语法错误,如不合格的套嵌、未知语法等。
c.template not found
这个错误一般是模版书写错误;或者是后台传来的数据格式不是标准的json格式;
二、jstl标签库的使用
JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能。
核心标签是最常用的JSTL标签。引用核心标签库的语法如下:
1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
常用标签说明:
标签 | 描述 |
<c:out> | 用于在JSP中显示数据,就像<%= ... > |
<c:set> | 用于保存数据 |
<c:remove> | 用于删除数据 |
<c:catch> | 用来处理产生错误的异常状况,并且将错误信息储存起来 |
<c:if> | 与我们在一般程序中用的if一样 |
<c:choose> | 本身只当做<c:when>和<c:otherwise>的父标签 |
<c:when> | <c:choose>的子标签,用来判断条件是否成立 |
<c:otherwise> | <c:choose>的子标签,接在<c:when>标签后,当<c:when>标签判断为false时被执行 |
<c:import> | 检索一个绝对或相对 URL,然后将其内容暴露给页面 |
<c:forEach> | 基础迭代标签,接受多种集合类型 |
<c:forTokens> | 根据指定的分隔符来分隔内容并迭代输出 |
<c:param> | 用来给包含或重定向的页面传递参数 |
<c:redirect> | 重定向至一个新的URL. |
<c:url> | 使用可选的查询参数来创造一个URL |
使用jstl例子:
1 <c:forEach var="i" begin="1" end="5"> 2 Item <c:out value="${i}"/><p> 3 </c:forEach>
三、artTemplate与jstl标签库
artTemplate模版引擎是使用在html中,jstl标签库是使用在jsp中,两者都实现了模版的作用,就拿来一起说了,但实际上,jstl标签库更加偏向于数据展示类页面,artTemplate更加偏向于交互类页面。