这两天在补以前没时间看的内容，这个micro template是一直落下的，今天把代码看完就开始写读后感了，助长一下记忆。
源码只有这么点，精华就在于new Function中那一段字符串。
通篇理解就是把找到模板，转成字符串，再通过with将传入的dataObject，做各种字符串替换和拆分组合，生成一段新的有数据的字符串。
流程：
Template String --> Template Function --> Template HTML。
下面来解读一下这段源码：
(function() {
let cache = {};
this.tmpl = function tmpl(str, data) {
let 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
.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('');");
console.log(fn)
return data ? fn(data) : fn;
}
let results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", undefined);
})();
第一行，新建一个缓存对象：
let cache = {};
第二行，声明一个tmpl函数：
this.tmpl = function tmpl(str, data) {
// something code...
}
tmpl函数里面：
let fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
new Function('obj', 'str');
其实tmpl只有一行代码，就一条三元表达式，这就是传说中的一行代码写出花来的意思吧。
核心代码就在new Function第2个参数，后面会解析，现在先一步一步来。
首先这里会判断tmpl函数传入的参数，首先会接受页面上一个标签的id：
<script type="text/template" id="item_tmpl">
<!-- 模板内容 -->
</script>
<script>
let cache = {};
this.tmpl = function tmpl(str, data) {
let fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
new Function('obj', 'str');
}
// 传入id名
tmpl("item_tmpl", undefined);
</script>
这里的代码从最下面一行往上看，执行 tmpl函数 后传入的 item_tmpl，接下来回到刚刚的三元表达式：
let str = 'item_tmpl';
let fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
new Function('obj', 'str');
拆分出来看就是这个状态，正则表达式 !/\W/.test(str) 先判断str中有没有非单词字符串，也就是 [\W] === [^A-Za-z0-9]。
很好，一开始传入的 "item_tmpl" 字符串是没有的，所以 !/\W/.test(str) 得到的是true，进入true的代码段：
let str = "item_tmpl";
// 刚刚三元表达式为true的代码段
cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML)
这里会先检测cache对象有没有这个id的缓存，如果没有就再执行一次 tmpl函数，至于或后边的再次执行应该都看懂了吧。
没错我们又回到了tmpl函数，但是这一次的str不再是 "item_tmpl" 了。而是这个<script>下的内容，先keep住我们从三元表达式执行tmpl这一段的记忆，先看一下假设的模板：
<!-- 假设script template中有这样一段内容 -->
<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>
看完这里，回到刚刚keep住的记忆，我们又回来了 tmpl函数的三元表达式：
let fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
new Function('obj', 'str');
但是这一次正则表达式验证的str不再是true了，因为我们得到的文本内容有非单词字符串，比如 空格、换行符 等。
所以我们就进入false阶段 new Function的代码，接下来的代码会有点冗长，怕引起不适的话请在医院病床上连着wifi观看。
let str = document.getElementById("item_tmpl");
new Function('obj',
"var p = [], print=function(){p.push.apply(p,arguments);};" +
"with(obj) {p.push('" +
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('');");
是的，很蛋疼，这一串跟乱码一样的代码。其实认真一看就是用new的方式创建函数：
function(obj) {
var p = [];
var print = function(){
p.push.apply(p,arguments);
};
with(obj) {
let str1 = 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("\\'")
p.push(str1);
}
return return p.join('');
}
好的，能看到这里的都是挺有耐心的，我们这里就直奔with部分吧，就这里是重点：
let str1 = 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("\\'")
其实这一段说是没什么好说的了，主要就是用正则做替换，把 <% %> 改成用逗号和变量分割的形式，再push进p数组里。
最后就是合并数组了：
return p.join('');
这个时候你只需要将script模板，和obj数据传进tmpl中就搞定了。
OK，杀青了！
网友评论