baiduTemplate / artTemplate

JS引擎模板

---

baiduTeplate

模板语法

提供一套模板语法，用户可以定义一个模板区块，每次根据传入的数据生成对应数据产生的html片段，从而渲染不同的界面效果；

优点：

• 语法简单直观，学习成本低，开发效率低，采用JavaScript的原生语法；
• 效率较高，默认html转义(防止XSS攻击)，并且支持包括URL转义等多种转义；
• 变量未定义直接输出为空，防止页面错乱；
• 分隔符可以自定义；

用法

• 1.引入文件

使用百度模板时，需要引入baiduTemplate.js文件

• 2.放置模板片段

  1. 页面中，模块可以放在
     2.或者存放在中，一般情况设置其CSS样式<code>display:none</code>来隐藏掉textarea，同样用id来标识，代码示例：<br> <code><textarea id="container2" style="display:none;"> 模板部分
     3.直接定义变量存储模板
     var tpl = "模板内容"；

• 3.调用引擎方式
  模板数据结构是json，可以在本地加载也可以从服务端加载过来
  方式1：baidu.template('container1',data); // 直接传入id即可
  方式2：baidu.template(tpl,data); // tpl是传入的模板(String类型),可以是模板的id也可以是一个模板片段的字符串，传入模板和对应的数据返回对应的html片段
  方式3：只传入tpl,这是返回的是一个编译后的函数，可以把这个函数缓存下来，传入不同的data就可以生成不同的html片段；
  代码示例： var fun = baidu.template(tpl);
  fun(data); // data 产生的html片段
  fun(data1); // data1 产生的html片段

自定义 分隔符

模板的分隔符为%，也可以自定义，自定义语法如下：
    设置左分隔符：baidu.template.LEFT_DELIMITER = ''

模板js语法

    <% var test = function(){
     //函数体
    };
    if(1){}else{};
    function testFun(){
        return;
    };
    %>
    ` 数据设置value值时，需要使用 =`
     var data={
    "title":'欢迎使用baiduTemplate',
    "list":[
        'test1:默认支持HTML转义，如输出
 2.表达式：
 <% %> 符号包裹起来的语句则为模板的逻辑表达式；
 对内容编码输出：<%=data%>
 不编码输出：<%=#data%>
 编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
 3.逻辑 支持js原生语法
 a.使用一个type="text/html"的script标签存放模板： 
  
 
    
<%=#name%>
        <%for(var i = 0; i
            

                
<%=friends[i]%>
            
    <%}%>
 
 
b.渲染模板：
 
 
    var data = {
        name:'tom',
        friends:[
            {name:'cat'},
            {name:'jerry'},
            {name:'lily'}
        ]
    }
    var html = template(id,data);
    document.body.innerHTML = html;
 
 
4.模板包含表达式，用于嵌套子模板
 5.模板不能访问全局对象，使用公用方法 template.helper(name,callback)注册公用辅助方法
 
 
    template.helper('$ubb2html', function (content) {
        // 处理字符串...
        return content;
    });
 
 
模板中使用方式：
 
 
    <% $ubb2html(content) %>
 
 
 
  
简介用法 简洁语法需要引入简洁语法版 template.js
 推荐使用，语法简单实用，利于读写。
 1.使用：
 在页面中引用引擎： 
 2.表达式：
 {{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
 条件表达式：
 
 
 
 
    {{if admin}}
        
admin
    {{else if code > 0}}
        
master
    {{else}}
        
error!
    {{/if}}
 
 
遍历表达式：
 
 
    {{each list as value index}}
        
{{index}} - {{value.user}}
    {{/each}}
    // 或者 (此方法需要加$符)
    {{each list}}
        
{{$index}} - {{$value.user}}
    {{/each}}
 
 
方法
 
 
 
  
1.template(id, data)；根据渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。
 
  
2.template.compile(source, options)； 返回一个渲染参数
 
  
3.template.helper(name, callback)； 返回一个渲染结果(添加辅助方法)
 
  
4.template.config(name, value); 更改引擎的默认设置
 
 
 
 
artTemplate 支持nodejs Express
 
 
 
  
1.安装：npm-install art-template
 
  
2.使用： var template = require('art-template');
 var data = {list:['data1','data2']};
 var html = template(__dirname + 'index/main',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