前端模板引擎 artTemplate 介绍

对于服务端开发人员来说在做前后端分离页面时往往会用js拼接html,但这样可读性不大好。在服务端渲染页面时我们会使用模板引擎像smarty等。最近查了一下前端也是有很多模板引擎的，可以像smarty一样渲染页面，下面介绍前端art-template模板引擎的使用：

GitHub地址: https://github.com/aui/art-template

项目文档地址 : https://aui.github.io/art-template/zh-cn/docs/

特性

性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍

支持运行时调试，可精确定位异常模板所在语句

对 NodeJS Express 友好支持

安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）

支持include语句，可在浏览器端实现按路径加载模板

支持预编译，可将模板转换成为非常精简的 js 文件

模板语句简洁，无需前缀引用数据

支持所有流行的浏览器

arttemplate模板引擎具体的使用。

1、引入template.js

2、编写前端的模版

// 数据写入的位置
<div id="content">
    // js模板样式
    <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引 {{i + 1}} ：{{value}}</li>
            {{/each}}
        </ul>
    </script>
</div>

3、渲染模板

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

4、不编码输出：
{{#content}}
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

5、条件表达式

{{if admin}}
    <p>admin</p>
{{else if code > 0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

6、遍历表达式

无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}

亦可以被简写：

{{each list}}
    <li>{{$index}} - {{$value.user}}</li>
{{/each}}

7、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据，亦可以指定数据：

{{include 'template_name' news_list}}

8、辅助方法

使用template.helper(name, callback)注册公用辅助方法：

template.helper('dateFormat', function (date, format) {
    // ..
    return value;
});

模板中使用的方式：

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

支持传入参数与嵌套使用：

{{time | say:'cd' | ubb | link}}

到这里arttemplatejs模板引擎最基本的使用方法就介绍完毕了。要是想更多的了解arttemplatejs模板引擎的使用方法，请看官网的介绍。

如何正确的使用arttemplatejs模板引擎。

1、前后端分离页面，ajax请求数据赋值

2、后端渲染时，替换后端模板引擎，直接将数据返回到页面js中，到浏览器时再渲染。减少了后端渲染的性能消耗。

使用实例：


<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>使用artTemplate</title>
    <link rel="stylesheet" href="http://me.52fhy.com/demo/jstemp/static/weui.css"/>
    <script src="http://me.52fhy.com/demo/jstemp/static/zepto.min.js"></script>

    <!-- 首先引入template-web.js文件 artTemplate.js-->
    <script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>
</head>

<body>
<div class="weui_panel weui_panel_access" id="wenzhang_list">
    <!--模板: 注意这里模板与前面的示例不一样了，直接使用一个type="text/html"的script标签存放模板-->
    <script id="js-tmp" type="text/html">
        <div class="weui_panel_hd">文章列表</div>
        <div class="weui_panel_bd js-blog-list">
            {{each list}}
            <div class="weui_media_box weui_media_text">
                <a href="{{ $value.url }}" class="" target="_blank">
                    <h4 class="weui_media_title">{{ $value.title }}</h4>
                </a>
                <p class="weui_media_desc">{{ $value.desc }}</p>
            </div>
            {{/each}}
        </div>
    </script>
    <!--/模板-->
</div>

<script type="text/javascript">

    $(function () {
        //根据id编译模板在进行渲染
        var data = {
            "list": [
                {
                    "title": "[置顶]Laravel5.0学习--01 入门",
                    "url": "http://www.cnblogs.com/52fhy/p/5271447.html",
                    "desc": "摘要: 本文以laravel5.0.22为例。"
                },
                {
                    "title": "[置顶]Laravel5.0学习--01 入门",
                    "url": "http://www.cnblogs.com/52fhy/p/5271447.html",
                    "desc": "摘要: 本文以laravel5.0.22为例。 "
                }]
        }
        var html = template('js-tmp', data);
        //填充渲染结果到content
        document.getElementById('wenzhang_list').innerHTML = html;
    });
</script>
</body>

支持条件和循环语法

引用链接

[1] https://github.com/aui/art-template: https://github.com/aui/art-template
[2] https://aui.github.io/art-template/zh-cn/docs/: https://aui.github.io/art-template/zh-cn/docs/