将HTML从JavaScript中抽离(源自：编写可维护的JavaScript)

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%>