JavaScript模板引擎實現數據交互

時間 2019-12-09

標籤 javascript 模板引擎實現數據交互欄目 JavaScript 简体版

原文原文鏈接

通過1年的磨練，近期終於稍微明白到,前端是怎麼作到企業要求的:數據交互.javascript

1,ajax+json這個是必須學的,但沒問題,咱們能夠經過這個博客來慢慢了解怎麼回事？css

2,能夠經過JS框架和JS模板來實現,但最後仍是要用到ajax+json的.html

注意:前端

我的建議以下：java

假如項目頁面數量是少於50-100個的，那麼推薦使用JS模板引擎；node

若是大於100個的用JS框架.各有各優點嘛。git

先分享JS模板的內容:我此次推薦使用百度的模板引擎,由於他比騰訊的art運行速度快1倍.(並且騰訊的模板，我看不懂怎麼分狀況去作.)github

HTML：這個是官方的web

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>

<!-- 引入baiduTemplate -->
<script type="text/javascript" src="js/template.min.js"></script>

</head>
<body>
    <h3>BaiduTemplate單元測試用例</h3>
<!-- 測試模板1開始 -->
<script id='content' 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('content'); var timeend = new Date().getTime(); alert('最大話編譯一次時間：'+(timeend-timestart)+'毫秒'); timestart = new Date().getTime(); //輸出HTML
        var html=bat('content',data); timeend = new Date().getTime(); alert('運行時間：'+(timeend-timestart)+'毫秒'); //顯示結果
 document.getElementById('results').innerHTML=html; } </script>

</body>
</html>

View Code

官方的JS代碼:有心學習的，仍是要認真看看裏面的註釋！ajax

/** * 特性: 一、語法簡單，學習成本極低，開發效率提高很大，性價比較高（使用Javascript原生語法）； 二、默認HTML轉義（防XSS攻擊），而且支持包括URL轉義等多種轉義； 三、變量未定義自動輸出爲空，防止頁面錯亂； 四、功能強大，如分隔符可自定等多種功能； */ ;(function(window){ //取得瀏覽器環境的baidu命名空間，非瀏覽器環境符合commonjs規範exports出去
    //修正在nodejs環境下，採用baidu.template變量名
    var baidu = typeof module === 'undefined' ? (window.baidu = window.baidu || {}) : module.exports; //模板函數（放置於baidu.template命名空間下）
    baidu.template = function(str, data){ //檢查是否有該id的元素存在，若是有元素則獲取元素的innerHTML/value，不然認爲字符串爲模板
        var fn = (function(){ //判斷若是沒有document，則爲非瀏覽器環境
            if(!window.document){ return bt._compile(str); }; //HTML5規定ID能夠由任何不包含空格字符的字符串組成
            var element = document.getElementById(str); if (element) { //取到對應id的dom，緩存其編譯後的HTML模板函數
                if (bt.cache[str]) { return bt.cache[str]; }; //textarea或input則取value，其它狀況取innerHTML
                var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML; return bt._compile(html); }else{ //是模板字符串，則生成一個函數
                //若是直接傳入字符串做爲模板，則可能變化過多，所以不考慮緩存
                return bt._compile(str); }; })(); //有數據則返回HTML字符串，沒有數據則返回函數 支持data={}的狀況
        var result = bt._isObject(data) ? fn( data ) : fn; fn = null; return result; }; //取得命名空間 baidu.template
    var bt = baidu.template; //標記當前版本
    bt.versions = bt.versions || []; bt.versions.push('1.0.6'); //緩存 將對應id模板生成的函數緩存下來。
    bt.cache = {}; //自定義分隔符，能夠含有正則中的字符，能夠是HTML註釋開頭 <! !>
    bt.LEFT_DELIMITER = bt.LEFT_DELIMITER||'<%'; bt.RIGHT_DELIMITER = bt.RIGHT_DELIMITER||'%>'; //自定義默認是否轉義，默認爲默認自動轉義
    bt.ESCAPE = true; //HTML轉義
    bt._encodeHTML = function (source) { return String(source) .replace(/&/g,'&amp;') .replace(/</g,'&lt;') .replace(/>/g,'&gt;') .replace(/\\/g,'&#92;') .replace(/"/g,'&quot;') .replace(/'/g,'&#39;'); }; //轉義影響正則的字符
    bt._encodeReg = function (source) { return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g,'\\$1');
 }; //轉義UI UI變量使用在HTML頁面標籤onclick等事件函數參數中
    bt._encodeEventHTML = function (source) { return String(source) .replace(/&/g,'&amp;') .replace(/</g,'&lt;') .replace(/>/g,'&gt;') .replace(/"/g,'&quot;') .replace(/'/g,'&#39;') .replace(/\\\\/g,'\\') .replace(/\\\//g,'\/') .replace(/\\n/g,'\n') .replace(/\\r/g,'\r'); }; //將字符串拼接生成函數，即編譯過程(compile)
    bt._compile = function(str){ var funBody = "var _template_fun_array=[];\nvar fn=(function(__data__){\nvar _template_varName='';\nfor(name in __data__){\n_template_varName+=('var '+name+'=__data__[\"'+name+'\"];');\n};\neval(_template_varName);\n_template_fun_array.push('"+bt._analysisStr(str)+"');\n_template_varName=null;\n})(_template_object);\nfn = null;\nreturn _template_fun_array.join('');\n"; return new Function("_template_object",funBody); }; //判斷是不是Object類型
    bt._isObject = function (source) { return 'function' === typeof source || !!(source && 'object' === typeof source); }; //解析模板字符串
    bt._analysisStr = function(str){ //取得分隔符
        var _left_ = bt.LEFT_DELIMITER; var _right_ = bt.RIGHT_DELIMITER; //對分隔符進行轉義，支持正則中的元字符，能夠是HTML註釋 <! !>
        var _left = bt._encodeReg(_left_); var _right = bt._encodeReg(_right_); str = String(str) //去掉分隔符中js註釋
            .replace(new RegExp("("+_left+"[^"+_right+"]*)//.*\n","g"), "$1") //去掉註釋內容 <%* 這裏能夠任意的註釋 *%>
            //默認支持HTML註釋，將HTML註釋匹配掉的緣由是用戶有可能用 <! !>來作分割符
            .replace(new RegExp("<!--.*?-->", "g"),"") .replace(new RegExp(_left+"\\*.*?\\*"+_right, "g"),"") //把全部換行去掉 \r回車符 \t製表符 \n換行符
            .replace(new RegExp("[\\r\\t\\n]","g"), "") //用來處理非分隔符內部的內容中含有 斜槓 \ 單引號 ‘ ，處理辦法爲HTML轉義
            .replace(new RegExp(_left+"(?:(?!"+_right+")[\\s\\S])*"+_right+"|((?:(?!"+_left+")[\\s\\S])+)","g"),function (item, $1) { var str = ''; if($1){ //將 斜槓 單引 HTML轉義
                    str = $1.replace(/\\/g,"&#92;").replace(/'/g,'&#39;'); while(/<[^<]*?&#39;[^<]*?>/g.test(str)){ //將標籤內的單引號轉義爲\r 結合最後一步，替換爲\'
                        str = str.replace(/(<[^<]*?)&#39;([^<]*?>)/g,'$1\r$2') }; }else{ str = item; } return str ; }); str = str //定義變量，若是沒有分號，須要容錯 <%var val='test'%>
            .replace(new RegExp("("+_left+"[\\s]*?var[\\s]*?.*?[\\s]*?[^;])[\\s]*?"+_right,"g"),"$1;"+_right_) //對變量後面的分號作容錯(包括轉義模式 如<%:h=value%>) <%=value;%> 排除掉函數的狀況 <%fun1();%> 排除定義變量狀況 <%var val='test';%>
            .replace(new RegExp("("+_left+":?[hvu]?[\\s]*?=[\\s]*?[^;|"+_right+"]*?);[\\s]*?"+_right,"g"),"$1"+_right_) //按照 <% 分割爲一個個數組，再用 \t 和在一塊兒，至關於將 <% 替換爲 \t
            //將模板按照<%分爲一段一段的，再在每段的結尾加入 \t,即用 \t 將每一個模板片斷前面分隔開
            .split(_left_).join("\t"); //支持用戶配置默認是否自動轉義
        if(bt.ESCAPE){ str = str //找到 \t=任意一個字符%> 替換爲 ‘，任意字符,'
                //即替換簡單變量 \t=data%> 替換爲 ',data,'
                //默認HTML轉義 也支持HTML轉義寫法<%:h=value%> 
                .replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'"); }else{ str = str //默認不轉義HTML轉義
                .replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':$1,'"); }; str = str //支持HTML轉義寫法<%:h=value%> 
            .replace(new RegExp("\\t:h=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'") //支持不轉義寫法 <%:=value%>和<%-value%>
            .replace(new RegExp("\\t(?::=|-)(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':$1,'") //支持url轉義 <%:u=value%>
            .replace(new RegExp("\\t:u=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':encodeURIComponent($1),'") //支持UI 變量使用在HTML頁面標籤onclick等事件函數參數中 <%:v=value%>
            .replace(new RegExp("\\t:v=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':baidu.template._encodeEventHTML($1),'") //將字符串按照 \t 分紅爲數組，在用'); 將其合併，即替換掉結尾的 \t 爲 ');
            //在if，for等語句前面加上 '); ，造成 ');if ');for 的形式
            .split("\t").join("');") //將 %> 替換爲_template_fun_array.push('
            //即去掉結尾符，生成函數中的push方法
            //如：if(list.length=5){%><h2>',list[4],'</h2>');}
            //會被替換爲 if(list.length=5){_template_fun_array.push('<h2>',list[4],'</h2>');}
            .split(_right_).join("_template_fun_array.push('") //將 \r 替換爲 \
            .split("\r").join("\\'"); return str; }; })(window);

View Code

我壓縮後的JS代碼:

;(function(window){var baidu=typeof module==="undefined"?(window.baidu=window.baidu||{}):module.exports; //模板函數(放置於baidu.template命名空間下)
baidu.template=function(str,data){var fn=(function(){if(!window.document){return bt._compile(str)}var element=document.getElementById(str);if(element){if(bt.cache[str]){return bt.cache[str]}var html=/^(textarea|input)$/i.test(element.nodeName)?element.value:element.innerHTML;return bt._compile(html)}else{return bt._compile(str)}})();var result=bt._isObject(data)?fn(data):fn;fn=null;return result}; var bt=baidu.template;//取得命名空間 baidu.template
bt.versions=bt.versions||[];bt.versions.push("1.0.6");bt.cache={}; //自定義分隔符，能夠含有正則中的字符，能夠是HTML註釋開頭 <! !>
bt.LEFT_DELIMITER=bt.LEFT_DELIMITER||"<%";bt.RIGHT_DELIMITER=bt.RIGHT_DELIMITER||"%>"; bt.ESCAPE=true;bt._encodeHTML=function(source){return String(source).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\\/g,"&#92;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")};bt._encodeReg=function(source){return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g,"\\$1")};bt._encodeEventHTML=function(source){return String(source).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/\\\\/g,"\\").replace(/\\\//g,"/").replace(/\\n/g,"\n").replace(/\\r/g,"\r")};bt._compile=function(str){var funBody="var _template_fun_array=[];\nvar fn=(function(__data__){\nvar _template_varName='';\nfor(name in __data__){\n_template_varName+=('var '+name+'=__data__[\"'+name+'\"];');\n};\neval(_template_varName);\n_template_fun_array.push('"+bt._analysisStr(str)+"');\n_template_varName=null;\n})(_template_object);\nfn=null;\nreturn _template_fun_array.join('');\n";
return new Function("_template_object",funBody);};bt._isObject=function(source){return'function'===typeof source||!!(source&&'object'===typeof source)};bt._analysisStr=function(str){var _left_=bt.LEFT_DELIMITER;var _right_=bt.RIGHT_DELIMITER;var _left=bt._encodeReg(_left_);var _right=bt._encodeReg(_right_);str=String(str).replace(new RegExp("("+_left+"[^"+_right+"]*)//.*\n","g"),"$1").replace(new RegExp("<!--.*?-->","g"),"").replace(new RegExp(_left+"\\*.*?\\*"+_right,"g"),"").replace(new RegExp("[\\r\\t\\n]","g"),"").replace(new RegExp(_left+"(?:(?!"+_right+")[\\s\\S])*"+_right+"|((?:(?!"+_left+")[\\s\\S])+)","g"),function(item,$1){var str="";if($1){str=$1.replace(/\\/g,"&#92;").replace(/'/g,"&#39;");while(/<[^<]*?&#39;[^<]*?>/g.test(str)){str=str.replace(/(<[^<]*?)&#39;([^<]*?>)/g,"$1\r$2")}}else{str=item}return str});str=str.replace(new RegExp("("+_left+"[\\s]*?var[\\s]*?.*?[\\s]*?[^;])[\\s]*?"+_right,"g"),"$1;"+_right_).replace(new RegExp("("+_left+":?[hvu]?[\\s]*?=[\\s]*?[^;|"+_right+"]*?);[\\s]*?"+_right,"g"),"$1"+_right_).split(_left_).join("\t");if(bt.ESCAPE){str=str.replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'")}else{str=str.replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':$1,'")}str=str.replace(new RegExp("\\t:h=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'").replace(new RegExp("\\t(?::=|-)(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':$1,'").replace(new RegExp("\\t:u=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':encodeURIComponent($1),'").replace(new RegExp("\\t:v=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':baidu.template._encodeEventHTML($1),'").split("\t").join("');").split(_right_).join("_template_fun_array.push('").split("\r").join("\\'");return str};})(window);

View Code

今天我發現，若是你直接拿官方的來去壓縮，有可能會出錯,由於網上不是全部的JS壓縮工具都會幫你作好，

同時你有可能會發現,壓縮前跟壓縮後運行的時間並不同，壓縮後的代碼可能會常常性的慢2-5毫秒不等.

緣由:JavaScript處理的HTML的內容,其實咱們應該壓縮的是html,而不是JS.

那麼咱們爲何習慣性或者道聽途說的遇到這樣就壓縮JS文件呢？那是爲了後端.

你所不知道的是對於大型項目來講，10KB可讓你的公司每一年節省很多費用.

因此，前端須要壓縮的文件有html,css,js,img，對就是所有文件都得壓縮，固然了，img得分狀況，否則壓縮後會失真.

好了，如今分享下我對模板引擎的一些使用分享:

<!DOCTYPE html>
<html>
    <head>
        <title>百度JS模板引擎</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Pragma" name="no-store" />
        <meta http-equiv="Cache-Control" name="no-store" />
        <meta http-equiv="window-target" content="_top" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="renderer" content="webkit">
        <meta name="msapplication-tap-highlight" content="no">
        <script type="text/javascript" src="js/template.min.js"></script>
        <style> li{list-style:none;}
        </style>
    </head>

    <body>
        <!-- 模板開始 -->
        <script id='content' type="text/html">
            <h1><%=title%></h1>

            <ul>
                <!-- 循環語句 for-->
                <%for(var i=0,len=list.length;i<len;i++){%>
                    <li>
                        <%=list[i]%>
                    </li>
                <%}%>
            </ul>

            <!-- 判斷語句if else;是用來dom判斷選擇的-->
            <%var j=0%>
                <%if(select.length>1) { %>
                    <h2>select,共有<%=select.length%>個元素</h2>
                    <ul>
                        <li>
                            <%=select[j]%>
                        </li>
                        <!--
                            <%for(var j=0,len=select.length;j<len;j++){%>
                                <li><%=select[j]%></li>
                            <%}%>
                        -->
                    </ul>
                <%} else{%>
                    <h2>select沒數據</h2>
                    <%}%>
            <p><%=footer%></p>
        </script>
        <!-- 模板結束 -->
        <div id="results"></div>

        <script type="text/javascript">
                var data = { title: "百度JS模板引擎--數據交互的學習", list: [ "這裏使用的是for循環", "for循環的做用是用來遍歷數據" ], select: [ "if語句的使用是用來dom判斷選擇的;同時只能輸出一個數據", "想把這個給遍歷出來嗎？那就用for循環" ], footer:"不須要考慮太多,直接用<%=value%>來寫你的內容便可" }; //模板調用
                var bat = baidu.template; //輸出函數
                var fun = bat('content'); //輸出HTML
                var html = bat('content', data); //顯示結果
 document.getElementById('results').innerHTML = html; </script>
    </body>

</html>

View Code

解釋下data裏面的數據：

title,list在JS裏面能夠不加引號的,但在JSON裏面，你必須得加引號.

好了，咱們正常狀況下已經完成不少了，那麼該怎麼作下一步的AJAX呢？

那麼咱們開始寫AJAX只須要把上面JS裏面的數據放到JSON裏面，把調用函數放到AJAX的回調函數裏面就行:

var xml=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp"); xml.onreadystatechange=function() { if(xml.readyState==4&&xml.status==200){ /*原理我就不解釋了,咱們只須要在回調函數裏面寫這些就行*/
                    //模板調用
                    var bat = baidu.template; //輸出函數
                    var fun = bat('content'); var data = xml.responseText; var html = bat("content",JSON.parse(xml.responseText)); document.getElementById("results").innerHTML = html; /*到這裏結束*/ } } xml.open("GET", "js/template.json", true); xml.send();

JSON文件以下:

template.json文件路徑我是放到js文件夾裏面的.

JSON裏面都是用{}來括住裏面的全部數據:

{ "title": "百度JS模板引擎--數據交互的學習", "list": [ "這裏使用的是for循環", "for循環的做用是用來遍歷數據" ], "select": [ "if語句的使用是用來dom判斷選擇的;同時只能輸出一個數據", "想把這個給遍歷出來嗎？那就用for循環" ], "footer":"不須要考慮太多,直接用<%=value%>來寫你的內容便可" }

(看到效果了吧，因此我仍是推薦 "key":"value" 這樣提早把key也寫上雙引號就簡單多了.)

也有寫朋友會想到要是用JQ不是更簡單嗎？(記得在頭部引入JQ文件哦)

　　　　$.ajax({ type: "get", dataType: "json", url: "js/template.json", success: function(data) { var bat = baidu.template; //輸出函數
                    var fun = bat('content'); var html = bat("content",data); document.getElementById("results").innerHTML = html; } });

區別在於:

 var data = xml.responseText; var html = bat("content",JSON.parse(xml.responseText));

JS裏面是須要你寫上這個來進行數據轉換，由於以前是字符串.

JQ不須要是由於它原本就是個庫,封裝了不少，否則你也不會去用它啦.

好了咱們已經把AJAX+JSON，整個數據交互，前端負責的這塊寫完了，

之後你可能會發現，其實JS模板或JS框架寫法很是相似，因此學習起來成本不會特別高.

完整的HTML代碼以下:

<!DOCTYPE html>
<html>
    <head>
        <title>百度JS模板引擎</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Pragma" name="no-store" />
        <meta http-equiv="Cache-Control" name="no-store" />
        <meta http-equiv="window-target" content="_top" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="renderer" content="webkit">
        <meta name="msapplication-tap-highlight" content="no">
        <script type="text/javascript" src="js/template.min.js"></script>
        <style> li { list-style: none; } </style>
    </head>

    <body>
        <!-- 模板開始 -->
        <script id='content' type="text/html">
            <h1><%=title%></h1>

            <ul>
                <!-- 循環語句 for-->
                <%for(var i=0,len=list.length;i<len;i++){%>
                    <li>
                        <%=list[i]%>
                    </li>
                    <%}%>
            </ul>

            <!-- 判斷語句if else;是用來dom判斷選擇的-->
            <%var j=0%>
                <%if(select.length>1) { %>
                    <h2>select,共有<%=select.length%>個元素</h2>
                    <ul>
                        <li>
                            <%=select[j]%>
                        </li>
                        <!--
                            <%for(var j=0,len=select.length;j<len;j++){%>
                                <li><%=select[j]%></li>
                            <%}%>
                        -->
                    </ul>
                    <%} else{%>
                        <h2>select沒數據</h2>
                        <%}%>
                            <p>
                                <%=footer%>
                            </p>
        </script>
        <!-- 模板結束 -->
        <div id="results"></div>
        <script type="text/javascript">
            var xml=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp"); xml.onreadystatechange=function() { if(xml.readyState==4&&xml.status==200){ /*原理我就不解釋了,咱們只須要在回調函數裏面寫這些就行*/
                    //模板調用
                    var bat = baidu.template; //輸出函數
                    var fun = bat('content'); var data = xml.responseText; var html = bat("content", JSON.parse(xml.responseText)); document.getElementById("results").innerHTML = html; /*到這裏結束*/ } } xml.open("GET", "js/template.json", true); xml.send(); </script>
    </body>

</html>