我們通過ajax請求或者是通過jsonp請求來獲取服務器回傳的數據，但是文件類型，有兩種方式，一是：xml文件類型。二是：json文件類型。我們可以通過DOM節點來解析，拼接到頁面中。創建符合語義化語言的標簽。賦值，再通過appenChind（）來添加到頁面中，我們在解析復雜的數據類型時，這種方式比較復雜。所以，我們可以利用好模板的特性來簡化我們解析的數據，再往頁面添加數據的工作。
我們可以下載大神們封裝好的模板來進行引用，我以百度的模板來進行操作。具體源碼如下：
;(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,'&')? ? ? ? ? ? .replace(//g,'>')? ? ? ? ? ? .replace(/\\/g,'\')? ? ? ? ? ? .replace(/"/g,'"')? ? ? ? ? ? .replace(/'/g,''');? ? };? ? //轉義影響正則的字符? ? bt._encodeReg = function (source) {? ? ? ? return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g,'\\$1');? ? };? ? //轉義UI UI變量使用在HTML頁面標簽onclick等事件函數參數中? ? bt._encodeEventHTML = function (source) {? ? ? ? return String(source)? ? ? ? ? ? .replace(/&/g,'&')? ? ? ? ? ? .replace(//g,'>')? ? ? ? ? ? .replace(/"/g,'"')? ? ? ? ? ? .replace(/'/g,''')? ? ? ? ? ? .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,"\").replace(/'/g,''');? ? ? ? ? ? ? ? ? ? while(/<[^<]*?'[^<]*?>/g.test(str)){? ? ? ? ? ? ? ? ? ? ? ? //將標簽內的單引號轉義為\r? 結合最后一步，替換為\'? ? ? ? ? ? ? ? ? ? ? ? str = str.replace(/(<[^<]*?)'([^<]*?>)/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){%>
',list[4],'
');}? ? ? ? ? ? //會被替換為 if(list.length=5){_template_fun_array.push('
',list[4],'
');}? ? ? ? ? ? .split(_right_).join("_template_fun_array.push('")? ? ? ? ? ? //將 \r 替換為 \? ? ? ? ? ? .split("\r").join("\\'");? ? ? ? return str;? ? };})(window);
下一步，我們怎么利用模板呢？
第一步是：我們用script標簽來引入我們的封裝好的模板文件。
第二步：我們在bady里定義我們的模板內容，稱為定義模板。用script標簽來創建，而類型 type = "text/html"或者是 type="text/tempale" 。然后，我們需要加上id，以備我們在用百度模板時能調用到。 我們在模板里面操作的話，要注意是語法。在百度模板里，我們用的是<%%>形式來解析標簽。我們可以在模板里面直接設置我們需要的接受數據的標簽。然后用自定義標簽<%=屬性%> 就可以賦值給我們自定義的標簽，注意：我們的自定義的標簽不能寫在<%%>里面，不然，會把我們接受數據的自定義的標簽當成屬性。導致語法錯誤！所以，我們遍歷數組時，要注意我們的大括號的包含。用<%%>來包裹里面。
還有，我們要注意的是，我們要的對象的屬性。用注意的是文件格式，要轉化為對象格式。然后再用模板的語法解析。直接把對象傳進來，可以解析對象下的屬性。
第三步：我們在script標簽里面再回調百度模板函數。定義一個變量來接受解析的數據。例如：
var html0 = baidu.template("定義的模板id值"，數據對象)；
document.querySeletor("頁面的標簽").innerHTML=html0
這就可以來解析了，顯示頁面了。
這是我們的模板的妙用。
