javascript模板引擎

使用方式一：

var _template = '<div>
          姓名:<$= GlobalData.name $><br/>
          年龄:<$= GlobalData.age $>
    </div>';
template.replace(_template,{
    name:"张三",
    age:30
});

结果：

<div>
   姓名：张三<br/>
   年龄：30
</div>

使用方式二：

var _template = '<div>
    <$ var list = GlobalData.list; $>
    <h2><$= GlobalData.title $></h2>
    <ul>
           <$ for(var i = 0,l = list.length;i < l;i++){
               var item = list[i]; $>
               <li>
                   <dl>
                       <dt>手机</dt>
                       <dd><$= item.phone $></dd>
                       <dt>用户名：</dt>
                       <dd><$= item.name $></dd>
                   </dl>
            </li>
        <$ } $>
    </ul>
</div>';
template.replace(_template,{
    list:[
        { phone:13500000000, name:"张三" },
        { phone:13500000000, name:"李四" }
    ],title:"手机列表"
});

结果：

使用方式三：

var _template = '<div>
    <$ var list = GlobalData.list; $>
    <h2><$= GlobalData.title $></h2>
    <ul>
           <$ for(var i = 0,l = list.length;i < l;i++){
               var item = list[i]; $>
               <li>
                   <dl>
                       <dt>手机</dt>
                       <dd><$= item.phone $></dd>
                       <dt>用户名：</dt>
                       <dd><$= GlobalData.formatter(item.name) $></dd>
                   </dl>
            </li>
        <$ } $>
    </ul>
</div>';
template.replace(_template,{
    list:[
        { phone:13500000000, name:"张三" },
        { phone:13500000000, name:"李四" }
    ],
    title:"手机列表",
    formatter:function(val){
        return val + " format";
    }
});

结果:

从结果上可以看出，在<$ $>中编写任何javascript都是有效的，<$= $>提供输出并且也支持javascript。

GlobalData作为模板中的唯一入口，json格式可无限扩展，也就有了无限可能。

代码部分：

 1 var template = {
 2     replace: function (pTemplate, pData) {
 3         var cache = {};
 4         var t = parse(pTemplate);
 5         if (t) {
 6            return t(pData);
 7         } else {
 8            return "";
 9         }
10         function parse(pTemplate) {
11            if (!cache[pTemplate]) {
12                var __list__ = [];
13                cache[pTemplate] = eval("(function(){return function(GlobalData){var __result__ = [];" + ("$>" + pTemplate + "<$").replace(/<$= ([sS]*?) $>/g, function (a, b) {
14                    return "<$ __result__.push(" + b + "); $>";
15                }).replace(/$>([sS]*?)<$/g, function (a, b) {
16                    if (/^s*$/.test(b))
17                        return "";
18                    else
19                        return "__result__.push(__list__[" + (__list__.push(b) - 1) + "]);";
20                }) + "return __result__.join('');}})()");
21            }
22            return cache[pTemplate];
23         }
24     },
25     render: function (pTemplate, pData) {
26         var _html = pTemplate;
27         return _html.replace(/${.*?}/g, function (a, b) {
28             var _key = a.replace(/$|{|}/g, "");
29             return pData.hasOwnProperty(_key) ? pData[_key] : a;
30         });
31     }
32}

PS:有彩蛋