js模板引擎-腾讯artTemplate 简洁语法例子

特性

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


  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Indextitle>  
        <script src="dist/template.js">script>  
    head>  
    <body>  
        <div id="content">div>  
        <script id="test" type="text/html">  
            {{if isAdmin}}  
                

{{title}}</h1>
    {{each list as value index}}
  • 索引:{{index}}:{{value}}</li> {{/each}} </ul> {{/if}} script> <script> var data = { title : 'HELLO WORLD', isAdmin : true, list : ['新闻','军事','历史','政治'] }; var html = template('test', data); document.getElementById("content").innerHTML = html; script> <hr/>no-escape 不转义HTML <div id="div_noescape">div> <script id="no_escape" type="text/html">

    不转义:{{#text}}</p>

    默认转义: {{text}}</p> script> <script> var data_noEscape = { text: 'hello world!' }; var html_noescape = template("no_escape", data_noEscape); document.getElementById("div_noescape").innerHTML = html_noescape; script> <hr/> 在javascript中存放模板 <div id="div_complie">div> <script> var source = '' + '{{each list}}'+ '

  • 索引:{{$index+1}}:{{$value}}</li>'+ '{{/each}}'+ '</ul>'; var data = { list : ['电影','电视剧','综艺','音乐'] }; var render = template.compile(source); var html = render(data); document.getElementById("div_complie").innerHTML = html; script> <hr/> 嵌入子模板(include) <div id="div_include">div> <script id="include" type="text/html"> {{include 'test'}} script> <script> document.getElementById("div_include").innerHTML = html; script> <hr/>辅助方法 <script id="helper" type="text/html"> {{time | xx:'yyyyMMddhh:mm:ss'}} script> <div id="div_helper">div> <script> /** * 对日期进行格式化, * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有: * y:年, * M:年中的月份(1-12), * d:月份中的天(1-31), * h:小时(0-23), * m:分(0-59), * s:秒(0-59), * S:毫秒(0-999), * q:季度(1-4) * @return String */ function dateFormat(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; } var data = { time: 1408536771253, }; template.helper("xx", dateFormat); var html = template('helper', data); document.getElementById('div_helper').innerHTML = html; // document.getElementById("div_helper").innerHTML = dateFormat(new Date()); script> body> html>

转自博客:https://www.cnblogs.com/ahu666/p/6373106.html

你可能感兴趣的:(js模板引擎-腾讯artTemplate 简洁语法例子)