像ASP一样的javascript模板函数

1. <script id="myTmpl" type="text/tmpl">
   
2. <% for (var i=0; i<10; i++) { %>
   
3.         <ul>
   
4.                 <li class="li1"><span><%=name%></span></li>
   
5.                 <li>电话：<%=tel%></li>
   
6.                 <li>ＱＱ：<a target="_blank" href="http://<%=qq%>.qzone.qq.com/"><%=qq%></a></li>
   
7.                 <li><%=addr%></li>
   
8.         </ul>
   
9. <% } %>
   
10. </script>
    
11. 
    
12. <script type="text/javascript">
    
13. var context = {
    
14.           "qq"  : '78423497'
    
15.         , "addr": '中国·普宁'
    
16.         , "name": '混混'
    
17.         , "tel" : '186812345678'
    
18. };
    
19. 
    
20. var html = tmpl(document.getElementById('myTmpl').text, context);
    
21. document.write(html);
    
22. </script>

复制代码

上面是一个使用例子。 看到那模板了么，写过 asp 的人一定不会陌生。

呵呵， 这是如何实现的呢， tmpl 是怎样一个函数呢

1. !function() {
   
2.         var cache = {};
   
3.         window.tmpl = function(strTmpl, args) {
   
4.                 var __argNames = [];
   
5.                 var __argValues = [];
   
6.                 for (var a in args) {
   
7.                         __argNames.push(a);
   
8.                         __argValues.push(args[a]);
   
9.                 }
   
10.                 var funcs = cache[strTmpl] || function() {
    
11.                         var f = [ 'var __out__ = [];' ];
    
12.                         strTmpl.replace(/<%=([\d\D]*?)%>|<%([\d\D]*?)%>|([\d\D]+?)(?=<\%|$)/g, function($0, $1, $2,
    
13. 
    
14. $3) {
    
15.                                 if ($3) {
    
16.                                         f.push('__out__.push(unescape("', escape($3), '"));');
    
17.                                 } else if ($1) {
    
18.                                         f.push('__out__.push(', $1, ');');
    
19.                                 } else if ($2) {
    
20.                                         f.push($2, ';');
    
21.                                 }
    
22.                         });
    
23.                         f.push('return __out__.join("")');
    
24.                         return new Function(__argNames.join(', '), f.join(''));
    
25.                 }();
    
26.                 cache[strTmpl] = funcs;
    
27.                 return funcs.apply(args||{}, __argValues);
    
28.         };
    
29. }();

复制代码