BaiDu Template

最新推荐文章于 2024-03-29 09:47:11 发布

Wisdom_Qiu

最新推荐文章于 2024-03-29 09:47:11 发布

阅读量527

点赞数

分类专栏： javascript 文章标签： javascript 语言百度模板

本文链接：https://blog.csdn.net/Wisdom_Qiu/article/details/52960253

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BaiduTempalte的优点：

学习成本低，采用javaScript原生的语言，所以效率比较高。
默认的HTML转义，防XSS攻击，并支持url等多种转义。
变量未定义时，自动输出为空，防止页面错乱，功能强大。

例子：

如何定义模板块代码？
1. 模版块可以放在

    <script type="text/template" id="template-test">
        <div>
            <h1>title: <%= title %></h1>
            <% for(var i = 0; i < 9 ; i++){ %>
                <h2>二级标题：<%= i %></h2>
                <ul>
                    <% for(var j = 0 ; j < 3; j++){ %>
                        <li>li <%=list[j]%></li>
                    <% } %>
                </ul>
            <% } %>
        </div>
    </script>

使用模板？

     <script>
         var data = {
                'title':'baiduTemplate',
                'list':["data1", "data2", "data3"],
            };
        var html = baidu.template('template-test' ,data);
        $("#box").html(html);
    </script>

还可以这样的方法使用模板

    <script>
        var data = {
            'title':'baiduTemplate',
            'list':["data1", "data2", "data3"],
        };
        var temp = baidu.template;
        var fun = temp('template-test');
        var html = fun(data);
        $("#box").html(html);
    </script>

### 总结
1. 在使用AJax获取Json数据文件，或者服务器端获取Json数据文件时，可以通过javaScript来操作
2. 模板可以再页面中定义，也可以通过服务器通过字符串的类型返回
3. baidu.template() 传入两个参数，一个是选区模块的DOM节点，另一个节点是需要传入选区模板的数据。
4. 下面有个大例子：

 <!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content="baidu template" />
    <meta name="description" content="javascript前端模板" />
    <title>test</title>
    <script type="text/javascript" src="baiduTemplate.js"></script>
</head>
<body>
    <h3>BaiduTemplate单元测试用例</h3>
<!-- 测试模板1开始 -->
    <script id='t:_1234-abcd-1' type="text/template">
    <br>
    1、基本输出（自动HTML转义）：  <%=value1%> 
    <br>
    <br>
    2、容错写法：  <%=value2;%>
    <br>
    <br>
    3、不转义输出： <%:=value3%> 或 <%-value3%>
    <br>
    <br>
    4、容错写法： <%:=value4;%>
    <br>
    <br>
    5、URL转义输出： <%:u=value5%>
    <br>
    <br>
    6、容错写法： <%:u=value6;%>
    <br>
    <br>
    7、UI变量在页面标签事件中使用转义： <%:v=value7%>
    <br>
    <br>
    8、容错写法：<%:v=value8;%>
    <br>
    <br>
    9、HTML转义输出：<%:h=value9%>
    <br>
    <br>
    10、容错写法：<%:h=value10;%>
    <br>
    <br>
    11、变量未定义自动输出空：<%=value11%>
    <br>
    <br>
    12、模板直接输出特殊字符：5个斜杠 / 5个单引 ‘’‘’‘ 5个双引 “”“”“
    <br>
    <br>
    13、注释：
        <!-- HTML注释支持 -->  
        <%* 模板自带注释 *%> 
        <% //js注释方式 
        %>
    <br>
    <br>
    14、判断语句：
        <%if(value14){%>
            <input type="text" value="<%:v=value14%>"/>
        <%}else{%>
            无值
        <%}%>
    <br>
    <br>
    15、循环语句：
    <br>
    <ul>
    <%for(var i=0;i<value17.length;i++){%>
        <li><%=value17[i]%></li>
    <%}%>
    </ul>
    <br>
    <br>
    16、a标签 <br>
    单引问题：<a target='_blank' href='http://www.baidu.com ' onclick='alert("test");'>test</a><br>
    双引问题：<a target="_blank" href="http://www.baidu.com" onclick="alert('test');">test</a><br>
    17、定义变量：
    <%var varTest1 = value1%>
    varTest1:  <%=varTest1;%>
    <br>
    18、定义变量容错：
    <%var varTest2 = value2;%>
    varTest2:  <%=varTest2%>
    <br>
</script>
    <!-- 测试模板1结束 -->

<div id="results"></div>

<script type="text/javascript">
    window.onload=function(){
        //测试数据，对应每个用例
        var data={
            value1:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value2:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value3:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value4:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value5:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value6:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value7:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span><span style="color:red;">\\\'\"</span>',
            value8:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span><span style="color:red;">\\\'\"</span>',
            value9:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value10:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value14:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value15:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
            value16:['<span style="color:red;">这是value</span>',123,'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>'],
            value17:['<span style="color:red;">这是value</span>',123,'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>']
        };

        //使用
        var bat=baidu.template;

        //设置分隔符
        //bat.LEFT_DELIMITER='<!';
        //bat.RIGHT_DELIMITER='!>';
        //设置默认是否转义
        //bat.ESCAPE = false;
        var timestart = new Date().getTime();
        //输出函数
        var fun=bat('t:_1234-abcd-1');

        var timeend = new Date().getTime();
        alert('最大话编译一次时间：'+(timeend-timestart)+'毫秒');
        timestart = new Date().getTime();
        //输出HTML
        var html=bat('t:_1234-abcd-1',data);
        timeend = new Date().getTime();
        alert('运行时间：'+(timeend-timestart)+'毫秒');
        //显示结果
        document.getElementById('results').innerHTML=html;
    }
</script>

</body>
</html>

最后一例引自：https://github.com/BaiduFE/BaiduTemplate/blob/master/test.html

Wisdom_Qiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BaiDu Template

BaiduTempalte的优点：学习成本低，采用javaScript原生的语言，所以效率比较高。默认的HTML转义，防XSS攻击，并支持url等多种转义。变量未定义时，自动输出为空，防止页面错乱，功能强大。例子：如何定义模板块代码？模版块可以放在 <script type="text/template" id="template-test"> <div>
复制链接

扫一扫

专栏目录