BaiDu Template

Wisdom_Qiu發表於2016-10-28
原文網址 : https://blog.csdn.net/wisdom_qiu/article/details/52960253
AI

BaiduTempalte的優點：

  1. 學習成本低，採用javaScript原生的語言，所以效率比較高。
  2. 預設的HTML轉義，防XSS攻擊，並支援url等多種轉義。
  3. 變數未定義時，自動輸出為空，防止頁面錯亂，功能強大。

例子：

  • 如何定義模板塊程式碼？
    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

相關文章