模板引擎 template

1.特性:

性能卓越,执行速度通常是Mustache与tmpl的20多倍(性能测试)

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

对NodeJS Express友好支持

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

支持include语句

可在浏览器端实现按路径加载模板

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

模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选

支持所有流行的浏览器

2.使用一个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>

渲染模板

var  data={

      title:'标签',

      list:['文艺','博客','摄影','电影','民谣','旅行','吉他']

}

var  html=template('test',data);

document.getElementById('content').innerHTML=html;

3.简洁语法和原生语法

简洁语法     template.js

{{if admin}}

       {{include  'admin_content'}} 

      {{each  list}}

             <div>{{$index}}.{{$value.user}}</div>

      {{/each}}

{{/if}}

原生语法      template-native.js

<%if    (admin)   {%  >

    <%  include('admin_count')  %>

    <%  for(var i=0;i<list.length;i++)  {  %>

             <div><%=i%>.<%=list[i].user%></div>

    <%  }  %>

<%  }  %>

4.方法(若没有data参数,将返回渲染函数)

template.compile(source,options)       返回一个渲染函数

template.render(source,options)      将返回渲染结果

template.helper(name,callback)      添加辅助方法,例如时间格式器:演示

template.config(name,value)       更改引擎的默认设置
 

5.使用预编译(预编译工具:TmodJS)

按文件与目录组织模板

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

模板支持子模板

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

基于预编译:

可将模板转换为非常精简的js文件(不依赖引擎)

使用同步模板加载接口

支持多种js模板输出:AMD、CMD、CommonJS

支持作为GruntJS插件构建

前端模板可共享给NodeJS执行

自动压缩打包模板

6.NodeJS安装

安装

     npm  inatall  art-template

使用

      var template =require('art-templadr') ;

      var  data={list:["aui","test"]};

      var  hrml=template(_dirname+'/index/main',data);

配置base指定模板目录可以缩短模板的路径,并能避免include语句越级访问任意路径引发安全隐患

      template.config('base',_dirname);

      var  html=template('index/html',data)

NodeJS+Express

      var  template=require('art-template');

      template.config('base','');

      template.config('extname','.html');

      app.engine('.html',template._express);

      app.set('view  engine','html');

      //app.set('views',_dirname+'/views');

运行demo

      node  demo/node-template-express.js

猜你喜欢

转载自blog.csdn.net/memoryI/article/details/82012118