ajax动态获取数据、创建页面方法之一百度JS模板引擎 baiduTemplate

最新推荐文章于 2022-02-25 23:43:00 发布

程序猿秃头之路

最新推荐文章于 2022-02-25 23:43:00 发布

阅读量271

点赞数

分类专栏： Web前端文章标签： JS模板引擎 ajax

Web前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

应用在前端模版系统或则后端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>

输出变量的方法如下：

//默认HTML转义，如果变量未定义输出为空
<%=title%>  

//不转义
<%:=title%> 或 <%-title%>

//URL转义，UI变量使用在模板链接地址URL的参数中时需要转义
<%:u=title%>

//UI变量使用在HTML页面标签onclick等事件函数参数中需要转义
//“<”转成“&lt;”、“>”转成“&gt;”、“&”转成“&amp;”、“'”转成“\&#39;”
//“"”转成“\&quot;”、“\”转成“\\”、“/”转成“\/”、\n转成“\n”、\r转成“\r”
<%:v=title%>

//HTML转义（默认自动）
<%=title%> 或 <%:h=title%>

UI变量使用在HTML页面标签onclick等事件函数参数中需要转义，不知道怎么转怎么拼接。。。

。

程序猿秃头之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax动态获取数据、创建页面方法之一百度JS模板引擎 baiduTemplate

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

扫一扫