如何利用模板将HTML从JavaScript中抽离

2024-03-11 17:28:04 472

一、当需要注入大段的HTML标签到页面中时，应该使用服务器渲染（从服务器加载HTML标签）

该方法将模板放置于服务器中使用XMLHttpRequest对象来获取外部标签（如多页应用）

functionloadDialog(name,oncomplete){
varxhr=newXMLHttpRequest();
xhr.open('get','/js/dialog/'+name,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
vardiv=document.getElementById('dlg-holder');
div.innerHTML=xhr.responseText;
oncomplete();
}else{
//错误处理代码
}
};
xhr.send(null);
}
//使用YUI的API
functionloadDialog(name,oncomplete){
Y.one('#dlg-holder').log('/js/dialog/'+name,oncomplete);
}
//使用JQuery的API
functionloadDialog(name,oncomplete){
$('#dlg-holder').load('/js/dialog/'+name,oncomplete);
}

二、客户端模板
对于少量的标签段，应该考虑采用客户端模板。
客户端模板是一些带‘插槽'(占位符)的标签片段，这些占位符会被JavaScript程序(模板引擎)替换为数据，然后把该替换好的标签片段插入到页面中。

JavaScript程序(模板引擎)
自定义模板文本处理程序

functionsprintf(text){
vari=1,args=arguments;
returntext.replace(/%s/g,function(){
return(i<args.length)?args[i++]:'';
});
}

模板文本存放位置
1.存放于HTML注释中

<ulid='mylist'><!--<liid='item%s'><ahref='%s'>%s</a></li>-->
...
</ul>

因为注释也是一个DOM节点，因此可以通过JS将其提取出来：

//格式化并插入DOM的方法定义
functionaddItem(url,text){
varmylist=document.getElementById('mylist');
vartemplateText=mylist.firstChild.nodeValue;//提取模板文本
varresult=sprintf(templateText,url,text);
div.innerHTML=result;
mylist.insertAdjacentHTML('beforeend',result);
}
//调用方法
addItem('/item/4','Firstitem');
addItem('/item/4','Seconditem');

2.存放于自定义type属性的script标签内

<scripttype='text/x-my-template'id='list-item'>
<li><ahref='%s'>%s</a></li>
</script>
functionaddItem(url,text){
varmylist=document.getElementById('mylist');
varscript=document.getElementById('list-item');
vartemplateText=script.text;//提取模板文本
varresult=sprintf(templateText,url,text);
vardiv=document.createElement('div');
div.innerHTML=result.replace(/^\s*/,'');//去除模板文本的前导空格(因为它是在<script>标签的下一行)
mylist.appendChild(div.firstChild);
}

使用第三方的模板系统（如：artTemplate-3.0、Jade、Handlebars、doT.js）

以Handlebars为例：

Handlebars建议将模板存放于script标签内

<scripttype='text/x-handlebars-template'id='list-item'>
{{#ifitems}}
<ulid='mylist'>
{{#eachitems}}
<li><ahref='{{url}}'>{{text}}</a></li>
{{/each}}
</ul>
{{/if}}
</script>
funtionaddItem(url,text){
varmylist=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);
}
//调用
addItem('/item/4,'Firstitem');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

如何利用模板将HTML从JavaScript中抽离

热门推荐

随机推荐