超快的前端引擎——artTemplate-3.0

标签：

一、特性

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

二、上手

　　1、编写模板

　　　　使用一个type="text/html"的script标签存放模板：　　

　　　　<script id="test" type="text/html">
　　　　　　<h1>{{title}}</h1>
　　　　　　<ul>
    　　　　　　{{each list as value i}}
        　　　　　　<li>索引 {{i + 1}} ：{{value}}</li>
    　　　　　　{{/each}}
　　　　　　</ul>
　　　　</script>
　　2、渲染模板

　　　　var data = {
    　　　　title: ‘标签‘,
    　　　　list: [‘A, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘]
　　　　};
　　　　var html = template(‘test‘, data);
　　　　document.getElementById(‘content‘).innerHTML = html;

三、模板语法

　　1、简洁语法

　　　　推荐使用，语法简单实用，利于读写。

　　　　{{if admin}}
    　　　　{{include ‘admin_content‘}}

   　　　　 {{each list}}
        　　　　<div>{{$index}}. {{$value.user}}</div>
    　　　　{{/each}}
　　　　{{/if}}

　2、使用

　　引用简洁语法的引擎版本，例如：

　　<script src="dist/template.js"></script>
　
　3、表达式
　　
　　{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。　

　　①、输出表达式：
　　
　　　　对内容编码的输出：{{content}}
　　　　
　　　　不编码的输出：{{#content}}
　　　　
　　　　注：编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
　　
　　②、条件表达式：

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

　④、遍历表达式：
　　
　　无论数组或者对象都可以用 each 进行遍历。

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

　　亦可被简写：

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

　⑤、模板包含表达式

　　　　用于嵌入子模板。

　　　　　　{{include ‘template_name‘}}

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

　　　　　　{{include ‘template_name‘ news_list}}

　　4、铺助方法

　　　　使用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}}、

四、方法

　　template(id, data)

　　　根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。

　　　如果没有 data 参数，那么将返回一渲染函数。

　　　template.compile(source, options)

　　　将返回一个渲染函数。

　　　template.render(source, options)

　　　将返回渲染结果。

　　　template.helper(name, callback)

　　　添加辅助方法。

　　　例如时间格式器：

　　　template.config(name, value)

　　　更改引擎的默认配置。

  五、使用预编译

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

　　　　1、按文件与目录组织模板

　　　　　　template(‘tpl/home/main‘, data)

　　　　2、模板支持引入子模板

　　　　　　{{include ‘../public/header‘}}

　　　基于预编译：

　　　　　　①、可将模板转换成为非常精简的 js 文件（不依赖引擎）

　　　　　　②、使用同步模板加载接口

　　　　　　③、支持多种 js 模块输出：AMD、CMD、CommonJS

　　　　　　④、支持作为 GruntJS 插件构建

　　　　　　⑤、前端模板可共享给 NodeJS 执行

　　　　　　⑥、自动压缩打包模板

超快的前端引擎——artTemplate-3.0

标签：

原文地址：http://www.cnblogs.com/jibaoyu/p/4792190.html