John Resig在2008年6月16日在博客中提到Micro-Templating（微模板），并表示更完善的版本将会放在新书《JavaScript忍者秘籍》中，让我们来看看，这个jQuery的作者在10年前，对前端模板有什么看法。
约定模板中插入变量的格式为：<%=XXX%> , XXX是变量，<%=是头部，%>是尾部。
可以copy下面的html，在浏览器中debug运行，观察变量变化情况以及代码执行顺序逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="results"></div>
</body>
<script>
// 立即执行函数表达式（IIFE）
(function(){
var cache = {}; // 声明缓存对象
/**
* 下面这个tmpl函数会被执行两次：“主步骤”：获取模板内容，“子步骤”：解析模板。
* 接收两个参数：
* str：需要解析的字符串
* data：适合这个模板的数据
*/
this.tmpl = function tmpl(str, data){
// 利用 !/\W/.test(str) 来检查是否str是否是“纯净的正则word“
// 如果是，则说明是模板id，对应这个例子的"item_tmpl"，此时执行“主步骤”
// 如果不是，则说明是模板内容，对应这个例子script标签中间的内容，此时执行“子步骤”
var fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) : // 执行tmpl（“子步骤”）
// 生成一个函数，这个函数的功能是生成纯JavaScript. 其中str是模版内容，obj是数据data（只有“子步骤”时）
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// 利用with(){}，形参是obj，实参是data，这里作为本地对象
"with(obj){p.push('" +
// 把模板转化成 JavaScript 代码
str
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t") // <%=是我们约定的 变量之前的头部， 这里按<%分割
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'") //这里用 (.*?)捕获变量，比如<%=id%>，就会捕获到id
.split("\t").join("');")
.split("%>").join("p.push('") // %>是我们约定的 变量之后的尾部， 这里按尾部分割
.split("\r").join("\\'")
+ "');}return p.join('');"); // p.join('') 会把前几个操作后存起来的数组p，再连接成为字符串返回
// “主步骤”时，data存在，这里fn( data )就是执行 “子步骤”时上面“new Function”生成的函数
// “子步骤”时，data不存在，这里直接返回上面“new Function”生成的函数
return data ? fn( data ) : fn;
};
})();
</script>
<script type="text/html" id="item_tmpl">
<div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
<div class="grid_1 alpha right">
<img class="righted" src="<%=profile_image_url%>"/>
</div>
<div class="grid_6 omega contents">
<p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
</div>
</div>
</script>
<script>
// test
var dataObject = {
id: '1000010',
i: 0,
profile_image_url: '',
from_user: 'Mark',
text: '你好'
}
var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject); // 执行tmpl（“主步骤”）
</script>
</html>
总结：
步骤：
主步骤：主要目标是根据id获取到模板内容，同步等待“子步骤”完成。然后，再以参数data为变量，“子步骤”的 纯 JavaScript为函数体，执行这个新函数；
子步骤：主要目标是根据模版内容，生成 纯JavaScript，再回到主步骤。
John Resig的原文：
https://johnresig.com/blog/javascript-micro-templating/
网友评论