某个精简到极致的模板渲染引擎

这个是在实习的时候项目里用的最多的一个tpl的渲染函数。代码不多却效率很高。一直在用却没分析过他的原理。

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

ui.tmpl = function tmpl(str, data) {
     // Figure out if we're getting a template, or if we need to
     // load the template - and be sure to cache the result.
     var fn = !/\W/.test(str) ?
         cache[str] = cache[str] ||
             tmpl(document.getElementById(str).innerHTML) :

         // Generate a reusable function that will serve as a template
         // generator (and which will be cached).
         new Function("obj",
             "var p=[],print=function(){p.push.apply(p,arguments);};" +

                 // Introduce the data as local variables using with(){}
                 "with(obj){p.push('" +

                 // Convert the template into pure JavaScript
                 str
                     .replace(/[\r\t\n]/g, " ")
                     .split("<%").join("\t")
                     .replace(/((^|%>)[^\t]*)'/g, "$1\r")
                     .replace(/\t=(.*?)%>/g, "',$1,'")
                     .split("\t").join("');")
                     .split("%>").join("p.push('")
                     .split("\r").join("\\'") + "');}return p.join('');");

     // Provide some basic currying to the user
     return data ? fn(data) : fn;
 };

还是有英文注释的，可以借助注释很好的分析下原理