如何利用模板将HTML从JavaScript中抽离
一、当需要注入大段的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');
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。