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

2019-11-20 08:48:27

字体：大中小

来源：转载

供稿：网友

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

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

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 {   //错误处理代码  } }; 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);}

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

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>

因为注释也是一个DOM节点，因此可以通过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);}//调用方法addItem('/item/4', 'First item');addItem('/item/4', 'Second item');

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

<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*/,''); //去除模板文本的前导空格(因为它是在<script>标签的下一行) mylist.appendChild(div.firstChild);}

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

以Handlebars为例：

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

<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);}//调用addItem('/item/4,'First item');

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

上一篇：什么是JavaScript中的结果值?

下一篇：Vue.js 2.0 和 React、Augular等其他前端框架大比拼