百度JS模板引擎 baiduTemplate

来源：互联网发布：用友房地产销售软件编辑：程序博客网时间：2024/05/16 10:59

应用在前端模版系统或则后端JavaScript的环境发布页面，它提供了一套模版语法，用户可以写一个模版区块，每次根据传入的数据生成对应数据产生的Html，渲染不同界面效果；它的优点：愈发简单，学习成本极低，开发效率提升很大，采用javascript的原生语法，所以效率比较高，默认HTML转义（防XSS攻击），并且支持包括URL转义等多种转义，变量未定义自动输出为空，防止页面错乱，功能强大，如分隔符可自定等多种功能；

//直接复制即可使用，记得要下载baiduTemplate.js//index.html<!doctype html><html><head><meta charset="utf-8"/><title>test</title><!-- 引入baiduTemplate --><script type="text/javascript" src="./baiduTemplate.js"></script></head><body><div id='result'></div><!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 --><script id="t:_1234-abcd-1" type="text/html"><div>    <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 -->    <!-- 输出变量语句，输出title -->    <h1>title:<%=title%></h1>    <!-- 判断语句if else-->    <%if(list.length>1) { %>        <h2>输出list，共有<%=list.length%>个元素</h2>        <ul>            <!-- 循环语句 for-->            <%for(var i=0;i<5;i++){%>                <li><%=list[i]%></li>            <%}%>        </ul>    <%}else{%>        <h2>没有list数据</h2>       <%}%></div>  </script><!-- 模板1结束 --><!-- 使用模板 --><script type="text/javascript">var data={    "title":'欢迎使用baiduTemplate',    "list":[        'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API',        'test2:',        'test3:',        'test4:list[5]未定义，模板系统会输出空'    ]};//使用baidu.template命名空间var bt=baidu.template;//可以设置分隔符//bt.LEFT_DELIMITER='<!';//bt.RIGHT_DELIMITER='!>';//可以设置输出变量是否自动HTML转义//bt.ESCAPE = false;//最简使用方法var html=bt('t:_1234-abcd-1',data);//渲染document.getElementById('result').innerHTML=html;</script></body></html>

原文地址：http://www.cnblogs.com/wangchengshen/p/3670882.html

0 0