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(/<\$= ([\s\S]*?) \$>/g, function (a, b) {
14                    return "<$ __result__.push(" + b + "); $>";
15                }).replace(/\$>([\s\S]*?)<\$/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:有彩蛋