首页 > 代码库 > js-template-art【二】语法
js-template-art【二】语法
一、模板语法
1、变量使用与输出
<% if (user) { %> <h2><%= user.name %></h2><% } %>或:{{if user}} <h2>{{user.name}}</h2>{{/if}}
art-template 同时支持 {{expression}}
简约语法与任意 JavaScript 表达式 <% expression %>
。
2、原始输出
{{@value}}或<%- value %>
原始输出语句不会对 HTML
内容进行转义
3、条件
{{if value}} ... {{/if}}{{if v1}} ... {{else if v2}} ... {{/if}}或<% if (value) { %> ... <% } %><% if (value) { %> ... <% } else { %> ... <% } %>
4、循环
{{each target}} {{$index}} {{$value}}{{/each}}或<% for(var i = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %><% } %>
target
支持Array
与Object
的迭代,其默认值为$data
$value
与$index
可以自定义:{{each target val key}}
5、变量
{{set temp = data.sub.content}}或<% var temp = data.sub.content; %>
6、模板继承
{{extend ‘./layout.art‘}}{{block ‘head‘}} ... {{/block}}或<% extend(‘./layout.art‘) %><% block(‘head‘, function(){ %> ... <% }) %>
模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。
7、子模板
{{include ‘./header.art‘}}{{include ‘./header.art‘ data}}或<% include(‘./header.art‘) %><% include(‘./header.art‘, data) %>
include
第二个参数默认值为 $data
。
8、打印输出
<% print(val, val2, val3) %>
9、过滤器
// 向模板中导入全局变量template.defaults.imports.$dateFormat = function(date, format){/*[code..]*/};template.defaults.imports.$timestamp = function(value){return value * 1000};
因为 imports
定义的全局变量的优先级会比普通模板变量高,所以建议命名使用 $
前缀。
{{date | $timestamp | $dateFormat ‘yyyy-MM-dd hh:mm:ss‘}}或<%= $dateFormat($timestamp(date), ‘yyyy-MM-dd hh:mm:ss‘) %>
{{value | filter}}
过滤器语法类似管道操作符,它的上一个输出作为下一个输入。
10、压缩html、js、css
template.defaults.minimize = true;
art-template 的页面压缩功能是在编译阶段实现的,因此完全不影响渲染速度,并且能够加快网络传输速度。但也有一个限制,它不能正常处理未闭合的 HTML 标签,因此使用 include
语句载入模板片段的时候请小心。
请避免书写这样的模板:
<body>或:</body></html>
使用 模板继承 代替 include
可以避免这样的问题出现。
11、调试
设置 template.defaults.debug=true
后,它会设置如下选项:
{ "bail": false, "cache": false, "minimize": false, "compileDebug": true}
debug
默认配置:
- Node 环境 =
process.env.NODE_ENV !== ‘production‘
- 浏览器环境 =
false
12、全局变量
1)内置变量清单
$data
传入模板的数据{Object|array}
$imports
外部导入的所有变量,等同template.defaults.imports
{Object}
print
字符串输出函数{function}
include
子模板载入函数{function}
extend
模板继承模板导入函数{function}
block
模板块声明函数{function}
2)注入全局变量
template.defaults.imports.$console = console;<% $console.log(‘hello world‘) %>
模板外部所有的变量都需要使用 template.defaults.imports
注入、并且要在模板编译之前进行声明才能使用。
13、配制语法规则
1)修改界定符
art-template 支持修改默认模板界定符 {{}}
与 <%%>
:
// 原生语法的界定符规则template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)([\w\W]*?)(-?)%>/;// art 语法的界定符规则template.defaults.rules[1].test = /{{\s*([@#]?)(\/?)([\w\W]*?)\s*}}/;
2)添加语法
从一个简单的例子说起,让模板引擎支持 ES6 ${name}
模板字符串的解析:
template.defaults.rules.push({ test: /\${([\w\W]*?)}/, use: function(match, code) { return { code: code, output: ‘escape‘ } }});
其中 test
是匹配字符串正则,use
是匹配后的调用函数。关于 use
函数:
- 参数:一个参数为匹配到的字符串,其余的参数依次接收
test
正则的分组匹配内容 - 返回值:必须返回一个对象,包含
code
与output
两个字段:code
转换后的 JavaScript 语句output
描述code
的类型,可选值:‘escape‘
编码后进行输出‘raw‘
输出原始内容false
不输出任何内容
值得一提的是,语法规则对渲染速度没有影响,模板引擎编译器会帮你优化渲染性能。
js-template-art【二】语法