baiduTemplate / artTemplate

JS引擎模板


baiduTeplate

模板语法

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

优点:

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

用法

  • 1.引入文件

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

  • 2.放置模板片段

    1. 页面中,模块可以放在
      2.或者存放在
      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

    你可能感兴趣的:(baiduTemplate / artTemplate)