剛開始在寫第一個動態網頁的demo時，由於html不多，便使用字符串拼接的方法添加到dom來渲染，可是在后來寫某外賣app時也需要如此添加，打開代碼一看幾千行，突然感覺累覺不愛
一行行的拼接有這功夫別人項目都上線了。於是在苦苦尋找之下，發現了可以使用js模板來渲染，還可以跟html文件相分離，終於等到你，還好我沒放棄。
話不多說，進入正題吧
首先我們要引入一個js插件，這便是underscore.js，這個東西的功能很強大，當我發現時感覺被壓在身下無法喘氣。
然后我們可以創建一個函數，記住這個函數，等下他有大作為，因為這樣我們便可以多次調用來插入模板。
function _gettpl(tplName, data){
return _.template($('#' + tplName).html())(data);
};
接下來便是生成模板吧，先看下面代碼，這個就是完整版了，插入以后就長這個樣子。
<ul id=“wife”> <li> <p>我是模板</p> </li> </ul>
我們需要在html頁面中添加<script type="text/template" id="man"></script>，將html元素全部塞進去，那么便已經生成模板了
這里要注意的是，在標簽里的內容，一般情況下<script>標簽智能補全的內容是type="text/javascript" 我們需要將其替換成type="text/template"。以及在里面命名一個id為“man”
<script type="text/template" id="man">
<li>
<p>我是模板</p>
</li>
</script>
這樣子就可以啦，心里是不是一萬只草泥馬奔騰而過？我拼死拼活拼接字符串，你兩句就搞完了？不不不，大俠饒命，其實我們還沒寫完這個時候我們要在js文件中寫下這么一句代碼
$('#wife').html(_gettpl('man', {'data': data}));
這個時候就是真的完成了呢。你可能要問了，那Id=“wife“的孫子是誰，其實就是你模板插進去的父類啦”。
還不懂？那親我一下就給你解釋一遍
最后在總結一下流程：
1、靜態頁html構建完成后拿到數據
2、引入underscore.js（這個自己網上下載下來就可以了）
3、將需要數據替換的html放進script標簽里（// <script type="text/template" id="xxx"> HTML模板 </script >）
4、在模板中的需要使用js的語法是以<% %>來包裹，例如循環
<% _.each( 需要遍歷的數據,像data.xxx ,function（）{ %>
HTML代碼
<% }) %>
開始用<% %>包住第一部分代碼，分行后里面html內容不需要再用<% %>包裹，正常填寫，最后結尾的js代碼再以<% %>包住就可以了
5、第三步script中的id，就是插入父級的id，通常在父級也會有一個id，例如 <ul id="aa"></ul>
模板是<script type="text/template" id="bb">
<li>需要插入的數據</li>
</script >
接下來在js里面便是寫 將id=“bb”的html插入到id=“aa”的容器中。
6、js通常會定義一個函數，比如
function _gettpl(tplName, data){
return _.template($('#' + tplName).html())(data);
}
函數接受2個參數，tplName是傳入的id，也就是需要插入容器的內容，id=“bb”，data就是你的數據了，接下來就可以將內容插進容器了
$('#aa').html(_gettpl('bb', {'data':data}))
這樣子他就插進去了
還想看？不了不了，營養跟不上，先到這里。
