我們通過(guò)ajax請(qǐng)求或者是通過(guò)jsonp請(qǐng)求來(lái)獲取服務(wù)器回傳的數(shù)據(jù)钠署，但是文件類(lèi)型糠聪，有兩種方式，一是：xml文件類(lèi)型谐鼎。二是：json文件類(lèi)型舰蟆。我們可以通過(guò)DOM節(jié)點(diǎn)來(lái)解析，拼接到頁(yè)面中狸棍。創(chuàng)建符合語(yǔ)義化語(yǔ)言的標(biāo)簽身害。賦值，再通過(guò)appenChind（）來(lái)添加到頁(yè)面中草戈，我們?cè)诮馕鰪?fù)雜的數(shù)據(jù)類(lèi)型時(shí)塌鸯，這種方式比較復(fù)雜。所以唐片，我們可以利用好模板的特性來(lái)簡(jiǎn)化我們解析的數(shù)據(jù)丙猬，再往頁(yè)面添加數(shù)據(jù)的工作。
我們可以下載大神們封裝好的模板來(lái)進(jìn)行引用费韭，我以百度的模板來(lái)進(jìn)行操作茧球。具體源碼如下：
;(function(window){? ? //取得瀏覽器環(huán)境的baidu命名空間，非瀏覽器環(huán)境符合commonjs規(guī)范exports出去? ? //修正在nodejs環(huán)境下星持，采用baidu.template變量名? ? var baidu = typeof module === 'undefined' ? (window.baidu = window.baidu || {}) : module.exports;? ? //模板函數(shù)（放置于baidu.template命名空間下）? ? baidu.template = function(str, data){? ? ? ? //檢查是否有該id的元素存在抢埋，如果有元素則獲取元素的innerHTML/value，否則認(rèn)為字符串為模板? ? ? ? var fn = (function(){? ? ? ? ? ? //判斷如果沒(méi)有document，則為非瀏覽器環(huán)境? ? ? ? ? ? if(!window.document){? ? ? ? ? ? ? ? return bt._compile(str);? ? ? ? ? ? };? ? ? ? ? ? //HTML5規(guī)定ID可以由任何不包含空格字符的字符串組成? ? ? ? ? ? var element = document.getElementById(str);? ? ? ? ? ? if (element) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //取到對(duì)應(yīng)id的dom揪垄，緩存其編譯后的HTML模板函數(shù)? ? ? ? ? ? ? ? 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{? ? ? ? ? ? ? ? //是模板字符串，則生成一個(gè)函數(shù)? ? ? ? ? ? ? ? //如果直接傳入字符串作為模板福侈，則可能變化過(guò)多，因此不考慮緩存? ? ? ? ? ? ? ? return bt._compile(str);? ? ? ? ? ? };? ? ? ? })();? ? ? ? //有數(shù)據(jù)則返回HTML字符串卢未，沒(méi)有數(shù)據(jù)則返回函數(shù) 支持data={}的情況? ? ? ? var result = bt._isObject(data) ? fn( data ) : fn;? ? ? ? fn = null;? ? ? ? return result;? ? };? ? //取得命名空間 baidu.template? ? var bt = baidu.template;? ? //標(biāo)記當(dāng)前版本? ? bt.versions = bt.versions || [];? ? bt.versions.push('1.0.6');? ? //緩存? 將對(duì)應(yīng)id模板生成的函數(shù)緩存下來(lái)肪凛。? ? bt.cache = {};? ? ? ? //自定義分隔符，可以含有正則中的字符辽社，可以是HTML注釋開(kāi)頭bt.LEFT_DELIMITER = bt.LEFT_DELIMITER||'<%';? ? bt.RIGHT_DELIMITER = bt.RIGHT_DELIMITER||'%>';? ? //自定義默認(rèn)是否轉(zhuǎn)義伟墙，默認(rèn)為默認(rèn)自動(dòng)轉(zhuǎn)義? ? bt.ESCAPE = true;? ? //HTML轉(zhuǎn)義? ? bt._encodeHTML = function (source) {? ? ? ? return String(source)? ? ? ? ? ? .replace(/&/g,'&')? ? ? ? ? ? .replace(//g,'>')? ? ? ? ? ? .replace(/\\/g,'\')? ? ? ? ? ? .replace(/"/g,'"')? ? ? ? ? ? .replace(/'/g,''');? ? };? ? //轉(zhuǎn)義影響正則的字符? ? bt._encodeReg = function (source) {? ? ? ? return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g,'\\$1');? ? };? ? //轉(zhuǎn)義UI UI變量使用在HTML頁(yè)面標(biāo)簽onclick等事件函數(shù)參數(shù)中? ? 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');? ? };? ? //將字符串拼接生成函數(shù)，即編譯過(guò)程(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類(lèi)型? ? 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;? ? ? ? //對(duì)分隔符進(jìn)行轉(zhuǎn)義滴铅，支持正則中的元字符戳葵，可以是HTML注釋var _left = bt._encodeReg(_left_);? ? ? ? var _right = bt._encodeReg(_right_);? ? ? ? str = String(str)? ? ? ? ? ? ? ? ? ? ? ? //去掉分隔符中js注釋? ? ? ? ? ? .replace(new RegExp("("+_left+"[^"+_right+"]*)//.*\n","g"), "$1")? ? ? ? ? ? //去掉注釋內(nèi)容? <%* 這里可以任意的注釋 *%>? ? ? ? ? ? //默認(rèn)支持HTML注釋?zhuān)瑢TML注釋匹配掉的原因是用戶有可能用來(lái)做分割符? ? ? ? ? ? .replace(new RegExp("", "g"),"")? ? ? ? ? ? .replace(new RegExp(_left+"\\*.*?\\*"+_right, "g"),"")? ? ? ? ? ? //把所有換行去掉? \r回車(chē)符 \t制表符 \n換行符? ? ? ? ? ? .replace(new RegExp("[\\r\\t\\n]","g"), "")? ? ? ? ? ? //用來(lái)處理非分隔符內(nèi)部的內(nèi)容中含有 斜杠 \ 單引號(hào) ‘ ，處理辦法為HTML轉(zhuǎn)義? ? ? ? ? ? .replace(new RegExp(_left+"(?:(?!"+_right+")[\\s\\S])*"+_right+"|((?:(?!"+_left+")[\\s\\S])+)","g"),function (item, $1) {? ? ? ? ? ? ? ? var str = '';? ? ? ? ? ? ? ? if($1){? ? ? ? ? ? ? ? ? ? //將 斜杠 單引 HTML轉(zhuǎn)義? ? ? ? ? ? ? ? ? ? str = $1.replace(/\\/g,"\").replace(/'/g,''');? ? ? ? ? ? ? ? ? ? while(/<[^<]*?'[^<]*?>/g.test(str)){? ? ? ? ? ? ? ? ? ? ? ? //將標(biāo)簽內(nèi)的單引號(hào)轉(zhuǎn)義為\r? 結(jié)合最后一步汉匙，替換為\'? ? ? ? ? ? ? ? ? ? ? ? str = str.replace(/(<[^<]*?)'([^<]*?>)/g,'$1\r$2')? ? ? ? ? ? ? ? ? ? };? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? str = item;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? return str ;? ? ? ? ? ? });? ? ? ? str = str? ? ? ? ? ? //定義變量拱烁，如果沒(méi)有分號(hào)，需要容錯(cuò)? <%var val='test'%>? ? ? ? ? ? .replace(new RegExp("("+_left+"[\\s]*?var[\\s]*?.*?[\\s]*?[^;])[\\s]*?"+_right,"g"),"$1;"+_right_)? ? ? ? ? ? //對(duì)變量后面的分號(hào)做容錯(cuò)(包括轉(zhuǎn)義模式 如<%:h=value%>)? <%=value;%> 排除掉函數(shù)的情況 <%fun1();%> 排除定義變量情況? <%var val='test';%>? ? ? ? ? ? .replace(new RegExp("("+_left+":?[hvu]?[\\s]*?=[\\s]*?[^;|"+_right+"]*?);[\\s]*?"+_right,"g"),"$1"+_right_)? ? ? ? ? ? //按照 <% 分割為一個(gè)個(gè)數(shù)組噩翠，再用 \t 和在一起戏自，相當(dāng)于將 <% 替換為 \t? ? ? ? ? ? //將模板按照<%分為一段一段的，再在每段的結(jié)尾加入 \t,即用 \t 將每個(gè)模板片段前面分隔開(kāi)? ? ? ? ? ? .split(_left_).join("\t");? ? ? ? //支持用戶配置默認(rèn)是否自動(dòng)轉(zhuǎn)義? ? ? ? if(bt.ESCAPE){? ? ? ? ? ? str = str? ? ? ? ? ? ? ? //找到 \t=任意一個(gè)字符%> 替換為 ‘伤锚，任意字符,'? ? ? ? ? ? ? ? //即替換簡(jiǎn)單變量? \t=data%> 替換為 ',data,'? ? ? ? ? ? ? ? //默認(rèn)HTML轉(zhuǎn)義? 也支持HTML轉(zhuǎn)義寫(xiě)法<%:h=value%>? ? ? ? ? ? ? ? ? .replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'");? ? ? ? }else{? ? ? ? ? ? str = str? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //默認(rèn)不轉(zhuǎn)義HTML轉(zhuǎn)義? ? ? ? ? ? ? ? .replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':$1,'");? ? ? ? };? ? ? ? str = str? ? ? ? ? ? //支持HTML轉(zhuǎn)義寫(xiě)法<%:h=value%>? ? ? ? ? ? ? .replace(new RegExp("\\t:h=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'")? ? ? ? ? ? //支持不轉(zhuǎn)義寫(xiě)法 <%:=value%>和<%-value%>? ? ? ? ? ? .replace(new RegExp("\\t(?::=|-)(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':$1,'")? ? ? ? ? ? //支持url轉(zhuǎn)義 <%:u=value%>? ? ? ? ? ? .replace(new RegExp("\\t:u=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':encodeURIComponent($1),'")? ? ? ? ? ? //支持UI 變量使用在HTML頁(yè)面標(biāo)簽onclick等事件函數(shù)參數(shù)中? <%:v=value%>? ? ? ? ? ? .replace(new RegExp("\\t:v=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':baidu.template._encodeEventHTML($1),'")? ? ? ? ? ? //將字符串按照 \t 分成為數(shù)組擅笔，在用'); 將其合并，即替換掉結(jié)尾的 \t 為 ');? ? ? ? ? ? //在if屯援，for等語(yǔ)句前面加上 '); 猛们，形成 ');if? ');for? 的形式? ? ? ? ? ? .split("\t").join("');")? ? ? ? ? ? //將 %> 替換為_(kāi)template_fun_array.push('? ? ? ? ? ? //即去掉結(jié)尾符，生成函數(shù)中的push方法? ? ? ? ? ? //如：if(list.length=5){%>
',list[4],'
');}? ? ? ? ? ? //會(huì)被替換為 if(list.length=5){_template_fun_array.push('
',list[4],'
');}? ? ? ? ? ? .split(_right_).join("_template_fun_array.push('")? ? ? ? ? ? //將 \r 替換為 \? ? ? ? ? ? .split("\r").join("\\'");? ? ? ? return str;? ? };})(window);
下一步狞洋，我們?cè)趺蠢媚０迥兀?/p>
第一步是：我們用script標(biāo)簽來(lái)引入我們的封裝好的模板文件弯淘。
第二步：我們?cè)赽ady里定義我們的模板內(nèi)容，稱(chēng)為定義模板徘铝。用script標(biāo)簽來(lái)創(chuàng)建耳胎，而類(lèi)型 type = "text/html"或者是 type="text/tempale" 。然后惕它，我們需要加上id怕午，以備我們?cè)谟冒俣饶０鍟r(shí)能調(diào)用到。 我們?cè)谀０謇锩娌僮鞯脑捬推牵⒁馐钦Z(yǔ)法郁惜。在百度模板里，我們用的是<%%>形式來(lái)解析標(biāo)簽。我們可以在模板里面直接設(shè)置我們需要的接受數(shù)據(jù)的標(biāo)簽兆蕉。然后用自定義標(biāo)簽<%=屬性%> 就可以賦值給我們自定義的標(biāo)簽羽戒，注意：我們的自定義的標(biāo)簽不能寫(xiě)在<%%>里面，不然虎韵，會(huì)把我們接受數(shù)據(jù)的自定義的標(biāo)簽當(dāng)成屬性易稠。導(dǎo)致語(yǔ)法錯(cuò)誤！所以包蓝，我們遍歷數(shù)組時(shí)驶社，要注意我們的大括號(hào)的包含。用<%%>來(lái)包裹里面测萎。
還有亡电，我們要注意的是，我們要的對(duì)象的屬性硅瞧。用注意的是文件格式份乒，要轉(zhuǎn)化為對(duì)象格式。然后再用模板的語(yǔ)法解析腕唧。直接把對(duì)象傳進(jìn)來(lái)或辖，可以解析對(duì)象下的屬性。
第三步：我們?cè)趕cript標(biāo)簽里面再回調(diào)百度模板函數(shù)四苇。定義一個(gè)變量來(lái)接受解析的數(shù)據(jù)孝凌。例如：
var html0 = baidu.template("定義的模板id值"，數(shù)據(jù)對(duì)象)月腋；
document.querySeletor("頁(yè)面的標(biāo)簽").innerHTML=html0
這就可以來(lái)解析了蟀架，顯示頁(yè)面了。
這是我們的模板的妙用榆骚。
