模板渲染引擎手冊

爲何使用模板渲染引擎：

1. 在作前端進行交互的時候，常常會用到字符串拼接，使用字符串拼接的時候不但本身看着很亂很麻煩，並且不利於維護。
2. 正由於如此才使用更加好的方法模板渲染
3. 使用模板渲染有幾點好處：

　　　　1）直接在html裏面進行寫，把文字內容等，進行替換更模板語音更加方便，

　　　　2）模板支持擴展各類方法，用於交互時作的判斷，

　　　　3）在模板裏面能夠寫任何js代碼，用於判斷或者其餘做用。

　　4.  下面我就詳細的爲你介紹這個模板。

模板渲染引擎使用方法：

 　　1.  首先在html裏面先把靜態頁面寫好（不用解釋），

　　2.  寫好以後再作交互的時候用用<script>標籤包起來你要交互的html標籤，script要有這幾個屬性，type="text/html"，id=""（取個id名，後面會用到）

　　3.  我介紹的這款模板的語法是  <%=屬性%> 很少說看代碼，

模板渲染引擎代碼說明：

 1 <div class="box"></div>
 2 <script type="text/html" id="template">
 3     <h3><%=title%></h3>
 4     <ul>
 5         <%for (var i=0; i < list.length ; i++){%>
 6         <li><%=list[i]%></li>
 7         <%}%>
 8     </ul>
 9     <a href="javascript:void 0;"><%=""|getFollowStatus%></a>
10 </script>

 

那麼我從第一行開始解釋這個代碼，

　　1，第一行代碼只是一個容器用來放交互內容的一個標籤。

　　2，2-10行是一個script標籤，重點：他有一個type  和id 的屬性。

　　3，第三行<h3><%=title%></h3>正如上面所說，模板的語音是<%=屬性%>  這個屬性下面會進行介紹。

　　4，作交互確定少不了for循環了，模板裏面也能夠寫JS代碼，只要把JS代碼寫在<%JS代碼%> 這裏面就能夠進行解析。不單單能夠寫for循環，只要是JS代碼均可以進行解析。

　　5，<%=""|getFollowStatus%>這是模板的高級用法之一，下面會詳細說明。

　　6，那麼問題來了，如何調用呢？很簡單，看代碼。

 

 1 initRequest: function () {
 2             var that = this;
 3             $.ajax({
 4                 url: 'index.json',
 5                 type: 'post',
 6                 data: '',
 7                 dataType: 'json',
 8                 success: function (data) {
 9                     $('.box').html(that.initTemplate('template', data));
10                 },
11                 error: function () {
12                     alert("異常！");
13                 }
14             })
15         },

 　　　　說明：當請求到數據後，只須要$(元素).html(模板方法(scrip的ID，請求到的數據))；

　　　　　　   而上文出現的title，list，等都是請求到的JSON裏面的屬性名（使用起來是否是很簡單）。

　　7，在進行交互的時候少不了須要進行處理數據，那麼把這些方法寫在哪裏呢？
　　　  首先模板支持擴展方法；看代碼。

 1 registerTemplate: function () {
 2     this.registerTemplateFn("getFollowStatus", function (obj) {
 3         if(obj.flag){
 4             return "關注"
 5         }else{
 6             return "已關注"
 7         }
 8     });
 9 },
10 registerTemplateFn : function(key, fn) {
11     var fns = this.initTemplate.fns = this.initTemplate.fns || {};
12     fns[key] = fn;
13 },

　　　　 須要傳倆個參數，第一個是個字符串，（就是上文的getFollowStatus），第二個是個function，用於處理邏輯性的問題。調用也很簡單，<%=""|getFollowStatus%>  [ | ]  前面的 "" 空字符串是做爲後面的參數來傳進去的。操做起來是否是很簡單？  function裏面須要傳一個參數obj    而obj就是data 上文所傳進去的data數據。

 

 

注意事項：

1. 在使用模板的時候，先注意字符串單雙引號，儘可能使用雙引號。
2. 若是發生了報錯的問題，是代碼寫的問題，並非模板自己的錯誤。（剛開始使用的時候可能會報一些錯誤，通過本身探索與學習會避免錯誤的。加油！！）
3. 能夠單獨的進行運行函數如<%="參數"|函數名%>
4. 注意！在<%if(true){%> 裏面禁止寫模板語言   錯誤示範：<%if(<%="參數"|函數名%>){%>  這樣是錯誤的。
5. 在寫if判斷的時候  或者for循環，必需要進行閉合標籤不然報錯。
6. 閉合方式<%if(true){%>     <%}%>

 

 

　　

總結：

　　1，本人也在學習這個模板，此文僅是本人理解，若有其它看法請在評論區回覆。

　  2，模板還有各類不一樣的高級用法，以後本人會上傳一個小demo，僅供參考。（點擊下載）