🧊 模板解析器轻考古

parse(`
  <% if (shouldCount) { %>
    <% for (var i = 1; i <= 3; i++) { %>
      <div>hello - <%= i + count %></div>
    <% } %>
  <% } else { %>
    <div>noop</div>
  <% } %>
`, {
  shouldCount: true,
  count: 1
})

<!-- 以下经过格式化 -->
<div>hello - 2</div>
<div>hello - 3</div>
<div>hello - 4</div>

// Simple JavaScript Templating
// John Resig - https://johnresig.com/ - MIT Licensed
(function () {
  var cache = {};

  this.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;
  };
})();

(function () {
  var cache = {};
  this.tmpl = function tmpl(str, data) {};
})();

<!-- type="text/html"，所以浏览器并不会执行这串脚本。它只能由 tmpl 来读取... -->
<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>

(function () {
  var cache = {};
  this.tmpl = function tmpl(str, data) {
    return !/\W/.test(str)
      ? // 缓存会将读取脚本内容到模板解析这个过程的解析结果缓存下来
        (cache[str] =
          cache[str] ||
          // 读取脚本内容
          tmpl(document.getElementById(str).innerHTML))
      : new Function();
  };
})();

new Function(
  "obj",
  "var p=[];" +
    // + '...'
    "return p.join('')"
);

/* VueJS */
with (vm) {
  return createVNode("p", { attrs: { hi: hello /* vm.hello */ } }, [
    createTextNode("Hello World"),
  ]);
}

str = `<% if (true) { %>
    <li><%=users[i]%></li>
<% } %>`;

// with 的使用方法都知道了，with(obj = { a })，那么
// 就能在内部直接读取 a，不需要写 obj.a
"with(obj){p.push('" +
  str
    // 将换行等空白字符转换为空格，这样所有代码都在一行了
    // '<% if (true) { %>     <li><%=users[i]%></li> <% } %>'
    .replace(/[\r\t\n]/g, " ")
    // ['', 'if (true) { %><li>', '=users[i]%></li>', ' } %>']
    .split("<%")
    // 因为 \t 刚才已经被替换成空格了，所以这里可以使用 \t 用来将不同行的代码字符串“相加”，
    // 一会儿再拆分时，不会和原先字符串里的字符混淆
    .join("\t")
    // 去掉模板标志两端的引号，在这个例子里不会用到
    .replace(/((^|%>)[^\t]*)'/g, "$1\r")
    // 以下三句最重要，将所有变量推入数组，生成结果形如 `push('xxx',x,'xxx')` 的字符串
    // 首先，刚才匹配完了 <%，所以 \t= 开头后边接的就是变量，这里让它转换成 ',x,' 的形式
    .replace(/\t=(.*?)%>/g, "',$1,'")
    .split("\t")
    // 在刚刚跟 split('<%') 的位置用括号还原，得到了 ',x,'xxx'); 的形式
    .join("');")
    // 在 \t=xxx 那次匹配，已经把变量模板对应的结束标志 %> 匹配完了，
    // 所以这是处理剩余语句的结束标志，用 split 拆分行后相当于直接把结束标记舍弃了
    .split("%>")
    // 最终在每行开头增加 push 方法，形成了 push('xxx',x,'xxx'); 的形式
    .join("p.push('")
    // 处理剩余的换行符
    .split("\r")
    .join("\\'") +
  "');}";

`with(obj){
    p.push(''); 
    if (true) { 
        p.push('     <li>',users[i],'</li>   '); 
    } 
    p.push('');
}`;

(function () {
  var cache = {};
  this.tmpl = function tmpl(str, data) {
    return data ? fn(data) : fn;
  };
})();