<ul> <% for ( var i = 0; i < users.length; i++ ) { %> <li><a href="https://www.jb51.net/<%=users[i].url%>" ><%=users[i].name%></a></li> <% } %> </ul>
可以发现，这个模板比入门例子的模板更为复杂，因为里面还夹杂着 JavaScript 代码。JavaScript 代码采用 <% %> 包含。而要替换的变量则是用 <%= %> 分隔开的。
下面我再来对代码做个注释。不过即使看了注释，你也不一定能很快理解，最好的办法是自己实际动手操作一遍。
// 代码整个放在一个立即执行函数里面 (function(){ // 用来缓存，有时候一个模板要用多次，这时候，我们直接用缓存就会很方便 var cache = {}; // tmpl绑定在this上，这里的this值得是window this.tmpl = function tmpl(str, data){ // 只有模板才有非字母数字字符，用来判断传入的是模板id还是模板字符串， // 如果是id的话，判断是否有缓存，没有缓存的话调用tmpl； // 如果是模板的话，就调用new Function()解析编译 var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : new Function("obj", // 注意这里整个是字符串，通过 + 号拼接 "var p=[],print=function(){p.push.apply(p,arguments);};" + "with(obj){p.push('" + str // 去除换行制表符\t\n\r .replace(/[\r\t\n]/g, " ") // 将左分隔符变成 \t .split("<%").join("\t") // 去掉模板中单引号的干扰 .replace(/((^|%>)[^\t]*)'/g, "$1\r") // 为 html 中的变量变成 ",xxx," 的形式, 如：\t=users[i].url%> 变成 '，users[i].url,' // 注意这里只有一个单引号，还不配对 .replace(/\t=(.*?)%>/g, "',$1,'") // 这时候，只有JavaScript 语句前面才有 "\t", 将 \t 变成 '); // 这样就可把 html 标签添加到数组p中，而javascript 语句 不需要 push 到里面。 .split("\t").join("');") // 这时候，只有JavaScript 语句后面才有 "%>", 将 %> 变成 p.push(' // 上一步我们再 html 标签后加了 ');， 所以要把 p.push(' 语句放在 html 标签放在前面，这样就可以变成 JavaScript 语句 .split("%>").join("p.push('") // 将上面可能出现的干扰的单引号进行转义 .split("\r").join("\\'") // 将数组 p 变成字符串。 + "');}return p.join('');"); return data ? fn( data ) : fn; }; })();
上面代码中，有一个要指出的就是new Function 的使用 方法。给 new Function() 传一个字符串作为函数的body来构造一个 JavaScript函数。编程中并不经常用到,但有时候应该是很有用的。
下面是 new Function 的基本用法:
// 最后一个参数是函数的 body(函数体),类型为 string; // 前面的参数都是 索要构造的函数的参数(名字) var myFunction = new Function('users', 'salary', 'return users * salary');
最后的字符串就是下面这种形式：
var p = [], print = function() { p.push.apply(p, arguments); }; with(obj) { p.push(' <ul> '); for (var i = 0; i < users.length; i++) { p.push(' <li><a href="', users[i].url, '" >', users[i].name, '</a></li> '); } p.push(' </ul> '); } return p.join('');
里面的 print 函数 在我们的模板里面是没有用到的。
要指出的是，采用 push 的方法在 IE6-8 的浏览器下会比 += 的形式快，但是在现在的浏览器里面， += 是拼接字符串最快的方法。实测表明现代浏览器使用 += 会比数组 push 方法快，而在 v8 引擎中，使用 += 方式比数组拼接快 4.7 倍。所以 目前有些更高级的模板引擎会 根据 javascript 引擎特性采用了两种不同的字符串拼接方式。
下面的代码是摘自腾讯的 artTemplate 的， 根据浏览器的类型来选择不同的拼接方式。功能越强大，所考虑的问题也会更多。
var isNewEngine = ''.trim;// '__proto__' in {} var replaces = isNewEngine ? ["$out='';", "$out+=", ";", "$out"] : ["$out=[];", "$out.push(", ");", "$out.join('')"];
挑战：有兴趣的可以改用 += 来实现上面的代码。
总结
模板引擎原理总结起来就是：先获取html中对应的id下得innerHTML，利用开始标签和关闭标签进行字符串切分，其实是将模板划分成两部份内容，一部分是html部分，一部分是逻辑部分，通过区别一些特殊符号比如each、if等来将字符串拼接成函数式的字符串,将两部分各自经过处理后，再次拼接到一起，最后将拼接好的字符串采用new Function()的方式转化成所需要的函数。
目前模板引擎的种类繁多，功能也越来越强大，不同模板间实现原理大同小异，各有优缺，请按需选择。
参考文章：
1、