百度JS模板引擎 baiduTemplate 1.0.6 版


A、baiduTemplate 简介

0、baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎

注：等不及可以直接点左侧导航中的”C、使用举例“，demo即刻试用。

1、应用场景：

前端使用的模板系统  或  后端Javascript环境发布页面

2、功能概述：

提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，
生成对应数据产生的HTML片段，渲染不同的效果。

3、特性：

1、语法简单，学习成本极低，开发效率提升很大，性价比较高（使用Javascript原生语法）；
2、默认HTML转义（防XSS***），并且支持包括URL转义等多种转义；
3、变量未定义自动输出为空，防止页面错乱；
4、功能强大，如分隔符可自定等多种功能；


B、使用举例

//直接复制即可使用，记得要下载baiduTemplate.js
//index.html
test
              

title:<%=title%>

         <%if(list.length>1) { %>         

输出list，共有<%=list.length%>个元素

        
                             <%for(var i=0;i<5;i++){%>                 
  • <%=list[i]%>
    •             <%}%>         
    <%}else{%>         

没有list数据

        <%}%>     
                   var data={    "title":'欢迎使用baiduTemplate',          "list":[   'test1:默认支持HTML转义，如输出

C、基本用法

0、引入文件：

baiduTemplate使用仅需引入baiduTemplate.js文件，未压缩是考虑大家调错阅读等方便，上线前请自行压缩代码。

如果在nodejs环境中使用，可以通过npm包管理安装

//注意：名称全部小写npm install baidutemplate

1、放置模板片段：

页面中，模板块可以放在

或者存放在

模板也可以直接存储在一个变量中

var tpl = " 模板内容 ";


2、调用引擎方式

（1）、数据结构是一个JSON，如：

var data={
    title:'baiduTemplate',
    list:[      'test data 1',      'test data 2',      'test data3'
    ]
}

（2）、baiduTemplate占用baidu.template命名空间

//可以付值给一个短名变量使用var bt = baidu.template;

（3）、方法一：tpl是传入的模板(String类型)，可以是模板的id，可以是一个模板片段字符串，传入模板和对应数据返回对应的HTML片段

//方法一：直接传入data，返回编译后的HTML片段var html0 = baidu.template(tpl,data);  

//或直接传入id即可var html0 = baidu.template('test1',data);

    方法二：或者可以只传入tpl，这时返回的是一个编译后的函数，可以把这个函数缓存下来，传入不同的data就可以生成不同的HTML片段

//方法二：先不传入data，返回编译后的函数
var fun = baidu.template(tpl);
//或直接传入id即可
var fun = baidu.template('test1');
//之后通过改变数据，调用缓存下来的函数，产生不同的HTML片段
var html1 = fun(data1);var html2 = fun(data2);

（4）、最后将他们插入到一个容器中即可

document.getElementById('result0').innerHTML=html0;document.getElementById('result1').innerHTML=html1;document.getElementById('result2').innerHTML=html2;


3、模板基本语法（默认分隔符为<% %>，也可以自定义）

分隔符内语句为js语法，如：

<% var test = function(){    //函数体};if(1){}else{};function testFun(){    return;
};
%>

假定事先设置数据为

var data={
    title:'baiduTemplate',
    list:['test1