JavaScript模板引擎使用

详细介绍参考  http://ejohn.org/blog/javascript-micro-templating/，这个模板引擎写得短小精悍，非常值得一看

 

1. [代码]tmpl.js     

01 // Simple JavaScript Templating
02 // John Resig - http://ejohn.org/ - MIT Licensed
03 (function() {
04     var cache = {};
05  
06     this.tmpl = function tmpl(str, data) {
07          
08         // Figure out if we're getting a template, or if we need to
09         // load the template - and be sure to cache the result.
10         var fn =
11             !/\W/.test(str)
12             ?
13             cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML)
14             :
15             // Generate a reusable function that will serve as a template
16             // generator (and which will be cached).
17             new Function(
18                 "obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +
19      
20                 // Introduce the data as local variables using with(){}
21                 "with(obj){p.push('" +
22          
23                 // Convert the template into pure JavaScript
24                 str
25                     .replace(/[\r\t\n]/g, " ")
26                     .split("<%").join("\t")
27                     .replace(/((^|%>)[^\t]*)'/g, "$1\r")
28                     .replace(/\t=(.*?)%>/g, "',$1,'")
29                     .split("\t")
30                     .join("');")
31                     .split("%>")
32                     .join("p.push('")
33                     .split("\r")
34                     .join("\\'") +
35                 "');}return p.join('');"
36             );  // Function ends
37  
38         // Provide some basic currying to the user
39         return data ? fn(data) : fn;
40     };
41 })();

2. [代码]index.html     跳至 [1] [2] [全屏预览]

view source
 
print?
01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
02 "http://www.w3.org/TR/html4/loose.dtd">
03 <html xmlns="http://www.w3.org/1999/xhtml">
04     <head>
05         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06         <title>JavaScript tmpl Use Demo</title>
07         <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
08         <script src="./tmpl.js" type="text/javascript"></script>
09                 <!-- 下面是模板user_tmpl -->
10         <script type="text/html" id="user_tmpl">
11             <% for ( var i = 0; i < users.length; i++ ) { %>
12             <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
13             <% } %>
14         </script>
15         <script type="text/javascript">
16                         // 用来填充模板的数据
17             var users = [
18                 { url: "http://baidu.com", name: "jxq"},
19                 { url: "http://google.com", name: "william"}
20             ];
21              
22             $(function() {
23                                // 调用模板引擎函数将数据填充到模板获得最终内容
24                 $("#myUl").html(tmpl("user_tmpl", users));
25             });
26         </script>
27     </head>
28     <body>
29         <div>
30             <ul id="myUl">
31             </ul>
32         </div>
33     </body>
34 </html>
posted @ 2014-03-23 19:55  SteveW  阅读(152)  评论(0)    收藏  举报