javascript模板引擎template.render使用
阿新 • • 發佈：2019-01-05
1 <script type="text/javascript"> 2 function test(){ 3 //你的方法 4 } 5 </script>
如上程式碼：通常我們見到的是以<script type="text/javascript"></script>開始/結束的一串javascript程式碼，並且，type="text/jacascript"。
有朋友可能見到過 以<script type="text/html"></script>開始/結束的一串javascript程式碼，並且，type="text/html" 這樣的js程式碼，是不是寫錯了？
真的寫錯了麼？答案是否定的。實際上以type="text/html" 這樣指定javascript型別的是一種javascript模板渲染方法，在實際專案中，我們非常有用，那麼下面我舉幾個例子，讓你對javascript模板渲染有一個更深刻的認識：
編寫模板
使用一個type="text/html"的script標籤存放模板，html如下：
1 <script id="test" type="text/html"> 2 <h1><%=title%></h1> 3 <ul> 4 <%for(i = 0; i < list.length; i ++) {%> 5<li>條目內容 <%=i + 1%> ：<%=list[i]%></li> 6 <%}%> 7 </ul> 8 </script> 9 <div id="content"></div>
模板邏輯語法開始與結束的界定符號為<% 與%>，若<%後面緊跟=號則輸出變數內容。
渲染模板
1 <script type="text/javascript" src="../js/template.js"></script> 2 //引入template.js 3<script type="text/javascript"> 4 var data = { 5 title: '標籤', 6 list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他'] 7 }; 8 var html = template.render('test', data); 9 document.getElementById('content').innerHTML = html; 10 </script>
好了，一個javascript模板渲染使用成功了。
下面看一個完整的例項：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>include demo</title> 6 <script src="template.js"></script> 7 </head> 8 9 <body> 10 <div id="content"></div> 11 <script id="customTag" type="text/html"> 12 <h1><!--[= header]--></h1> 13 <ul> 14 <!--[for(var i=0; i<tag.length; i++){]--> 15 <li>條目內容<!--[=i+1]--> : <!--[=tag[i]]--></li> 16 <!--[}]--> 17 </ul> 18 </script> 19 <script> 20 template.openTag = '<!--['; 21 template.closeTag = ']-->'; 22 var listdata = { 23 header : 'your study list', 24 tag : ['演算法導論','linq','c#','jquery','django','python'] 25 }; 26 var resulthtml = template.render ('customTag', listdata); 27 document.getElementById('content').innerHTML = resulthtml; 28 29 // 30 </script> 31 </body> 32 33 </html>
有興趣的朋友測試一下吧，這個用法還是挺高大上的，比如在一些用Ajax響應的頁面，這種用法比較廣泛。