javascript模板引擎template.render使用

时间:2022-08-24 08:36:40
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"。

有朋友可能见到过 以<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('tagcontent').innerHTML = resulthtml;
28
29 //
30 </script>
31 </body>
32
33 </html>

有兴趣的朋友测试一下吧,这个用法还是挺高大上的,比如在一些用Ajax响应的页面,这种用法比较广泛。