Scripts 学盟

标题: 像ASP一样的javascript模板函数 [打印本页]
作者: 混混@普宁.中国    时间: 2012-6-27 23:07:56     标题: 像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>

  12. <script type="text/javascript">
  13. var context = {
  14.           "qq"  : '78423497'
  15.         , "addr": '中国·普宁'
  16.         , "name": '混混'
  17.         , "tel" : '186812345678'
  18. };

  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,

  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. }();
复制代码




欢迎光临 Scripts 学盟 (http://www.iscripts.org/) Powered by Discuz! X2