javascript模板引擎template.render使用

来源：互联网发布：java string 倒序编辑：程序博客网时间：2024/05/21 10:49

本文转载自： javascript模板引擎template.render使用

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响应的页面，这种用法比较广泛。

阅读全文

0 0