模板引擎 - AuxUI - 模块化前端UI框架

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能。

auxui 的模板引擎模板，取材于art-template-4.1x ，我们只是简单的封装，更多文档请参阅 art-template 官方文档：https://aui.github.io/art-template/zh-cn/docs/index.html

需要加载template模块，可通过下列方式加载

//加载模块
auxui(['template'], function (template){

//加载后执行一些动作和事件处理

});

实例

渲染数据

<!-- 模板 -->
<script type="text/html" id="tpl">
<ul>
    {{each lists val key}}
    <li>{{key}} - {{val}}</li>
    {{/each}}
</ul>
</script>

<!-- 渲染容器 -->
<div id="template"></div>

<!-- js -->
<script type="text/javascript">
auxui(['template'], function (template){

    var html = template('tpl', {
        title : '基本例子',
        lists : ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    });

    $('#template').html(html);

});
</script>

兼容性

E8+（IE8 需要补丁才能运行）详情示例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>IE</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
</head>

<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}

<h1>{{title}}</h1>
<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>

{{/if}}
{{$data}}
</script>

<script type="text/javascript">
auxui(['template'], function (template){

    var data = {
        title: '基本例子',
        isAdmin: true,
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    $('#content').html(html);

});
</script>
</body>
</html>

语法

支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。

标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

标准语法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

模板一级特殊变量可以使用 $data 加下标的方式访问：{{$data['user list']}}

原文输出

标准语法

{{@ value }}

原始语法

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

<%- value %>

条件

标准语法

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环

标准语法

{{each target}}
    {{$index}} {{$value}}
{{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

1.target 支持 array 与 object 的迭代，其默认值为 $data。

2.$value 与 $index 可以自定义：{{each target val key}}。

变量

标准语法

{{set temp = data.sub.content}}

原始语法

<% var temp = data.sub.content; %>

模板继承

标准语法

{{extend './layout.html'}}
{{block 'head'}} ... {{/block}}

原始语法

<% extend('./layout.html') %>
<% block('head', function(){ %> ... <% }) %>

子模板

标准语法

{{include './header.html'}}
{{include './header.html' data}}

原始语法

<% include('./header.art') %>
<% include('./header.art', data) %>

1.data 数默认值为 $data；标准语法不支持声明 object 与 array，只支持引用变量，而原始语法不受限制。

2.内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。

过滤器

注册过滤器

template.defaults.imports.dateFormat = function(date, format){
    /* 代码 */
};
template.defaults.imports.timestamp = function(value){
    return value * 1000
};

标准语法

{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

原始语法

如果想修改 {{ }} 与 <% %>

<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

模板变量

模板通过 $imports 可以访问到模板外部的全局变量与导入的变量

导入变量

    <!-- js -->
    template.defaults.imports.log = console.log;

    <!-- html -->
    <% $imports.log('hello world') %>

内置变量清单：

$data 传入模板的数据

$imports 外部导入的变量以及全局变量

print 字符串输出函数

include 子模板载入函数

extend 模板继承模板导入函数

block 模板块声明函数

修改界定符

// 原始语法的界定符规则
template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/;
// 标准语法的界定符规则
template.defaults.rules[1].test = /{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/;

它们是一个正则表达式，你可以只修改界定符部分。例如修改 <% %> 为：

var rule = template.defaults.rules[0];
rule.test = new RegExp(rule.test.source.replace('<%', '<\\\?').replace('%>', '\\\?>'));

选项

参数选项	说明	默认值
caseSensitive	以区分大小写的方式处理属性（对自定义HTML标记很有用）	false
collapseBooleanAttributes	从布尔属性中省略属性值	false
collapseInlineTagWhitespace	display:inline;折叠时不要在元素之间留下任何空格。必须与。一起使用collapseWhitespace=true	false
collapseWhitespace	折叠有助于文档树中文本节点的空白区域	false
conservativeCollapse	始终折叠到1个空格（永远不要完全删除）。必须与。一起使用collapseWhitespace=true	false
customAttrAssign	允许支持自定义属性赋值表达式的正则表达式数组（例如'<div flex?="{{mode != cover}}"></div>'）	[]
customAttrCollapse	正则表达式，指定自定义属性以从中删除换行符（例如/ng-class/）
customAttrSurround	允许支持自定义属性环绕表达式的正则表达式数组（例如<input {{#if value}}checked="checked"{{/if}}>）	[]
customEventAttributes	允许支持自定义事件属性的正则表达式数组minifyJS（例如ng-click）	[ /^on[a-z]{3,}$/ ]
decodeEntities	尽可能使用直接Unicode字符	false
html5	根据HTML5规范解析输入	true
ignoreCustomComments	一组正则表达式，允许在匹配时忽略某些注释	[ /^!/ ]
ignoreCustomFragments	egex'es允许忽略某些片段的阵列，当一致时（例如，{{ ... }}等）	[ /<%[\s\S]?%>/, /<\?[\s\S]?\?>/ ]
includeAutoGeneratedTags	插入HTML解析器生成的标签	true
keepClosingSlash	在单例元素上保留尾部斜杠	false
maxLineLength	指定最大行长度。压缩输出将在有效的HTML分割点按换行符分割
minifyCSS	在样式元素和样式属性中缩小CSS（使用clean-css）	false（可能是true，Object，Function(text, type)）
minifyJS	缩小脚本元素和事件属性中的JavaScript（使用UglifyJS）	false（可能是true，Object，Function(text, inline)）
minifyURLs	缩小各种属性中的URL（使用relatedurl）	false（可能是String，Object，Function(text)）
preserveLineBreaks	当标记之间的空格包含换行符时，始终折叠为1换行符（从不完全删除它）。必须与。一起使用collapseWhitespace=true	false
preventAttributesEscaping	防止转义属性值	false
processConditionalComments	通过minifier处理条件注释的内容	false
processScripts	对应于类型脚本的元素串的阵列通过minifier处理（例如text/ng-template，text/x-handlebars-template等）	[ ]
quoteCharacter	用于属性值的引用类型（'或“）
removeAttributeQuotes	尽可能删除属性周围的引号	false
removeComments	隔离HTML	false
removeEmptyAttributes	使用仅限空白的值删除所有属性	false（可能是true，Function(attrName, tag)）
removeEmptyElements	删除所有带有空内容的元素	false
removeOptionalTags	删除可选标签	false
removeRedundantAttributes	值匹配默认值时删除属性。	false
removeScriptTypeAttributes	type="text/javascript"从script标签中删除。其他type属性值保持不变	false
removeStyleLinkTypeAttributes	删除type="text/css"从style和link标签。其他type属性值保持不变	false
removeTagWhitespace	尽可能删除属性之间的空间。请注意，这将导致HTML无效！	false
sortAttributes	按频率对属性排序	false
sortClassName	按频率对样式类进行排序	false
trimCustomFragments	修剪周围的白色空间ignoreCustomFragments	false
useShortDoctype	doctype用短（HTML5）doctype 替换	false

方法

名称	描述	实例
.template(filename, content)	根据模板名渲染模板	var html = template('/welcome.html', { value: 'aui' });
.compile(source, options)	编译模板并返回一个渲染函数	var render = template.compile('hi, <%=value%>.'); var html = render({value: 'aui'});
.render(source, data, options)	编译并返回渲染结果	var html = template.render('hi, <%=value%>.', {value: 'aui'});
.defaults(Object)	模板引擎默认配置。参考选项