快捷導(dǎo)航

如何利用模板將HTML從JavaScript中抽離

更新時(shí)間：2016年10月08日 15:15:52 作者：蘇福

這篇文章主要為大家詳細(xì)介紹了利用模板將HTML從JavaScript中抽離的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、當(dāng)需要注入大段的HTML標(biāo)簽到頁面中時(shí)，應(yīng)該使用服務(wù)器渲染（從服務(wù)器加載HTML標(biāo)簽）

該方法將模板放置于服務(wù)器中使用XMLHttpRequest對象來獲取外部標(biāo)簽（如多頁應(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的API
function loadDialog(name, oncomplete) {
 Y.one('#dlg-holder').log('/js/dialog/'+name,oncomplete);
}
//使用JQuery的API
function loadDialog(name, oncomplete) {
 $('#dlg-holder').load('/js/dialog/'+name, oncomplete);
}

二、客戶端模板
對于少量的標(biāo)簽段，應(yīng)該考慮采用客戶端模板。
客戶端模板是一些帶‘插槽'(占位符)的標(biāo)簽片段，這些占位符會(huì)被JavaScript程序(模板引擎)替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁面中。

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)，因此可以通過JS將其提取出來：

//格式化并插入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');

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: