javascript模板引擎template.render使用

時間 2019-12-01

標籤 javascript 模板引擎 template.render template render 使用欄目 JavaScript 简体版

原文原文鏈接

1 <script type="text/javascript">
2 
3 function test(){
4 
5  //你的方法
6 
7 }
8 
9 </script>

如上代碼：一般咱們見到的是以<script type="text/javascript"></script>開始/結束的一串javascript代碼，而且，type="text/jacascript"。javascript

有朋友可能見到過以<script type="text/html"></script>開始/結束的一串javascript代碼，而且，type="text/html" 這樣的js代碼，是否是寫錯了？html

真的寫錯了麼？答案是否認的。實際上以type="text/html" 這樣指定javascript類型的是一種javascript模板渲染方法，在實際項目中，咱們很是有用，那麼下面我舉幾個例子，讓你對javascript模板渲染有一個更深入的認識：java

編寫模板python

使用一個type="text/html"的script標籤存放模板，html以下：jquery

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>

模板邏輯語法開始與結束的界定符號爲<% 與%>，若<%後面緊跟=號則輸出變量內容。算法

渲染模板django

 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模板渲染使用成功了。c#

下面看一個完整的實例：測試

 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('tagcontent').innerHTML = resulthtml;
28 
29     //
30 </script>
31 </body>
32 
33 </html>