Art-template模板

时间：2024-01-02 08:28:02

1、介绍

新一代 javascript 模板引擎。

2、性能（引）

　　1、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
　　2、支持运行时调试，可精确定位异常模板所在语句（演示）
　　3、对 NodeJS Express 友好支持
　　4、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
　　5、支持include语句，可在浏览器端实现按路径加载模板
　　6、支持预编译，可将模板转换成为非常精简的 js 文件
　　7、模板语句简洁，无需前缀引用数据
　　8、支持所有流行的浏览器

3、方法介绍

template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数，那么将返回一渲染函数。

template.compile(source, options)

将返回一个渲染函数。

var render = template.compile(tpl);//tpl是模板

tpl代码如下

Art-template模板
{{each data as value index}}

    <tr>

        <td>{{index+1}}</td>

        <td>{{value.a1}}</td>

        <td class="tooltip" rel="{{value.a2}}"><p>{{value.a3}}</p></td>

        <td><a href="">{{value.a4}}</a></td>

        <td><a href="">{{value.a5}}</a></td>

        <td><a href="">{{value.a6}}</a></td>

        <td>{{value.a7}}</td>

        <td>{{value.a8}}</td>

        <td><a href="javascript:;"  class="block"><span dataId="{{value.a9}}" class="block del-practice"></span></a></td>

    </tr>

{{/each}}
Art-template模板

template.render(source, options)

将返回渲染结果。同上返回的template.compile(source, options)函数

代码如下

我们拿var render = template.compile(tpl);返回的函数render来生成html页面

如下：

$('#ID').html(render(result));//result为后端返回的json数据

template.helper(name, callback)

添加辅助方法。

例如：（转）

Art-template模板
template.helper('dateFormat', function (date, format) {

    date = new Date(date);

    var map = {

        "M": date.getMonth() + 1, //月份

        "d": date.getDate(), //日

        "h": date.getHours(), //小时

        "m": date.getMinutes(), //分

        "s": date.getSeconds(), //秒

        "q": Math.floor((date.getMonth() + 3) / 3), //季度

        "S": date.getMilliseconds() //毫秒

    };

    format = format.replace(/([yMdhmsqS])+/g, function(all, t){

        var v = map[t];

        if(v !== undefined){

            if(all.length > 1){

                v = '0' + v;

                v = v.substr(v.length-2);

            }

            return v;

        }

        else if(t === 'y'){

            return (date.getFullYear() + '').substr(4 - all.length);

        }

        return all;

    });

    return format;

});
Art-template模板

如何使用？

如下：

{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}//模板中这么使用  time是一个字符串  dateFormat函数名

template.config(name, value)

更改引擎的默认配置。参数如下

openTag     String          {{            语法开始标签
closeTag     String          }}            语法结束标签
escape        Boolean        true         是否编码输出 HTML 字符
cache          Boolean        true         是否开启缓存（依赖 options 的 filename 字段）
compress     Boolean       false         是否压缩 HTML 多余空白字符

使用预编译
可突破浏览器限制，让前端模板拥有后端模板一样的同步“文件”加载能力：

按文件与目录组织模板

template('tpl/home/main', data)
模板支持引入子模板

{{include '../public/header'}}

基础不再详述下面介绍模板语法与原生语法的使用例子

4、语法使用

基础语法

Art-template模板
<ul>

    {{each result as value index}}

        {{if index <= 2}}

            <li class="item-ranking clearfix firstList {{if index == result.length-1}}last{{/if}}">

                <img class="fl head-portrait" src="{{value.picUrl}}" onerror="javascript:this.src='people-error.png';"></img>

                <div class="zz_big"></div>

                <div class="fl modify-num">

                    <p class="ranking-name">

                        <span class="ell student-name" title="{{value.name}}">{{value.name}}</span>

                        <span class="student">已练习&nbsp;{{value.exerciseNum}}</span>

                        <div class="view-btn" data-id={{value.ID}} data-url="{{value.picUrl}}" data-num="{{index+1}}">查看</div>

                    </p>

                </div>

            </li>

        {{else}}

             <li class="item-ranking clearfix {{if index == result.length-1}}last{{/if}}">

                <img class="fl head-portrait" src="{{value.picUrl}}" onerror="javascript:this.src='people-error.png';"></img>

                <div class="zz_small"></div>

                <div class="fl modify-num">

                    <p class="fl ranking-name">

                        <span class="ell student-name" title="{{value.name}}">{{value.name}}</span>

                        <span class="student">已练习&nbsp;{{value.exerciseNum}}</span>

                    </p>

                </div>

                <div class="view-btn1 fl" data-id={{value.ID}} data-url="{{value.picUrl}}" data-num="{{index+1}}">查看</div>

            </li>

        {{/if}}

    {{/each}}

</ul>
Art-template模板

模板语法支持基础的判断 但是高级的功能，比如js原生的方法是不支持的，下面介绍原生语法例子

原生语法

Art-template模板
<%for(var key=0;key<data.length;key++){%>

    <tr<%if(/失败/.test(data[key].result)){%> class="redbg" <%}%>>

        <td><%=(key+1)%></td>

        <td><%=data[key].a1%></td>

        <td><%=data[key].a2%></td>

        <td><%=data[key].a3%></td>

        <td><%=data[key].a4 %></td>

        <td><%=data[key].a5%></td>

        <td>

            <%if(data[key].a5 == "测试失败"){%>

                <!--<button type="button" class="block recheck btn" dataID="<%=data[key].piGaiTopicId%>">ssss</button>-->

            <%}%><%else{%>

                <%=data[key].mark%>

            <%}%>

        </td>

    </tr>

<%}%>
Art-template模板

原生语法支持js的方法的使用和判断，这在灵活使用上很方便，可读性稍差了点。

相关文章