一、當(dāng)需要注入大段的HTML標(biāo)簽到頁(yè)面中時(shí)，應(yīng)該使用服務(wù)器渲染（從服務(wù)器加載HTML標(biāo)簽）
該方法將模板放置于服務(wù)器中使用XMLHttpRequest對(duì)象來(lái)獲取外部標(biāo)簽（如多頁(yè)應(yīng)用）
function loadDialog(name, oncomplete) { var xhr = new XMLHttpRequest(); xhr.open('get', '/js/dialog/'+name, true); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200){ var div = document.getElementById('dlg-holder'); div.innerHTML = xhr.responseText; oncomplete(); }else { //錯(cuò)誤處理代碼 } }; xhr.send(null);}//使用YUI的APIfunction loadDialog(name, oncomplete) { Y.one('#dlg-holder').log('/js/dialog/'+name,oncomplete);}//使用JQuery的APIfunction loadDialog(name, oncomplete) { $('#dlg-holder').load('/js/dialog/'+name, oncomplete);}二、客戶(hù)端模板
對(duì)于少量的標(biāo)簽段，應(yīng)該考慮采用客戶(hù)端模板。
客戶(hù)端模板是一些帶‘插槽'(占位符)的標(biāo)簽片段，這些占位符會(huì)被JavaScript程序(模板引擎)替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁(yè)面中。
JavaScript程序(模板引擎)
自定義模板文本處理程序
function sprintf(text){ var i=1,args=arguments; return text.replace(/%s/g, function(){ return (i<args.length) ? args[i++] : ''; });}模板文本存放位置
1.存放于HTML注釋中
<ul id = 'mylist'><!--<li id='item%s'><a href='%s'>%s</a></li>--> ...</ul>
因?yàn)樽⑨屢彩且粋€(gè)DOM節(jié)點(diǎn)，因此可以通過(guò)JS將其提取出來(lái)：
//格式化并插入DOM的方法定義function addItem(url,text){ var mylist = document.getElementById('mylist'); var templateText = mylist.firstChild.nodeValue; //提取模板文本 var result = sprintf(templateText,url,text); div.innerHTML = result; mylist.insertAdjacentHTML('beforeend', result);}//調(diào)用方法addItem('/item/4', 'First item');addItem('/item/4', 'Second item');2.存放于自定義type屬性的script標(biāo)簽內(nèi)
<script type='text/x-my-template' id='list-item'> <li><a href='%s'>%s</a></li></script>function addItem(url,text){ var mylist = document.getElementById('mylist'); var script = document.getElementById('list-item'); var templateText = script.text; //提取模板文本 var result = sprintf(templateText,url,text); var div = document.createElement('div'); div.innerHTML = result.replace(/^/s*/,''); //去除模板文本的前導(dǎo)空格(因?yàn)樗窃?lt;script>標(biāo)簽的下一行) mylist.appendChild(div.firstChild);}使用第三方的模板系統(tǒng)（如：artTemplate-3.0、Jade、Handlebars、doT.js）
以Handlebars為例：
Handlebars建議將模板存放于script標(biāo)簽內(nèi)
<script type='text/x-handlebars-template' id='list-item'> {{#if items}} <ul id='mylist'> {{#each items}} <li><a href='{{url}}'>{{text}}</a></li> {{/each}} </ul> {{/if}}</script>funtion addItem(url,text){ var mylist = document.getElementById('mylist'), script = document.getElementById('list-item'), template = Handlebars.compile(script.text), //提取模板文本,返回格式化方法 div = document.createElement('div'), result; result = template({text:text,url:url}); div.innerHTML = result; mylist.appendChild(div.firstChild);}//調(diào)用addItem('/item/4,'First item');以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
