1.方法一:从服务器加载(ajax)
结论:需特别注意XSS漏洞
2.方法二:简单客户端模版
(1)在HTML注释中包含模版,注释是和元素及文本一样的DOM节点
<ul id="mylist"><!--<li><a href="%s">%s</a></li>--> <li><a href="/item/1">First item</a></li> <li><a href="/item/2">Second item</a></li> <li><a href="/item/3">Third item</a></li> </ul>
function sprintf(text){ var i = 1, args = arguments; return text.replace(/%s/g,function(){ return (i < args.length) ? args[i++] : ""; }); } function addItem(url, text){ var myList = document.getElementById("mylist"), templateText = myList.firstChild.nodeValue, result = sprintf(templateText, url, text); mylist.insertAdjacentHTML("beforeEnd", result); } addItem("/item/4", "Fourth item");
结论:非常不推荐,因为注释必须挨着<ul id="mylist">,如果有空格或者回车,firstChild就不是该li注释了。
(2)使用一个带有自定义type属性的<script>元素
<ul id="mylist"> <li><a href="/item/1">First item</a></li> <li><a href="/item/2">Second item</a></li> <li><a href="/item/3">Third item</a></li> </ul> <script type="text/x-my-template" id="list-item"> <li><a href="%s">%s</a></li> </script>
function sprintf(text){ var i = 1, args = arguments; return text.replace(/%s/g,function(){ return (i < args.length) ? args[i++] : ""; }); } function addItem(url, text){ var myList = document.getElementById("mylist"), script = document.getElementById("list-item"), templateText = script.text, result = sprintf(templateText, url, text), div = document.createElement("div"); div.innerHTML = result.replace(/^s*/, ""); mylist.appendChild(div.firstChild); } addItem("/item/4", "Fourth item");
结论:针对比较简单的模版
3.方法三:复杂客户端模版
使用Hanlebars等模版引擎,支持一些简单的逻辑和循环,有的模版引擎同时支持原生语法和简洁语法,简洁语法往往用{{key}}来进行数据替换,原生语法可以在模版中使用js代码,一般通过这样的方式输出数据<%=key%>