实现一个模板引擎

2020-02-02

摘要：学习冴羽的博客研究 underscore 实现一个模板引擎

思路

underscore 的 template 函数参考了 jQuery 的作者 John Resig 在 2008 年发表的一篇文章 JavaScript Micro-Templating
简单例子：

<script type="text/html" id="tempId">
  <%for ( var i = 0; i < users.length; i++ ) { %>
    <li>
      <a href="<%=users[i].url%>">
        <%=users[i].name%>
      </a>
    </li>
  <% } %>
</script>

John Resig 的思路是将其转换成一段拼接成的 js 字符串，最后运行这段字符串：

// 模拟数据
var users = [{"name": "name1", "url": "http://www.baidu.com"}];

var p = [];
for (var i = 0; i < users.length; i++) {
  p.push('<li><a href="');
  p.push(users[i].url);
  p.push('">');
  p.push(users[i].name);
  p.push('</a></li>');
}
console.log(p.join('')); // '<li><a href="http://www.baidu.com">name1</a></li>'

如何替换才能实现这样的转换？重点来了：
1、将 %> 替换成 p.push('
2、将 <% 替换成 ');
3、将 <%=xxx%> 替换成 ');p.push(xxx);p.push('
转换后的模板是：

');for ( var i = 0; i < users.length; i++ ) { p.push('
  <li>
    <a href="');p.push(users[i].url);p.push('">
      ');p.push(users[i].name);p.push('
    </a>
  </li>
'); } p.push('

补全其他部分代码：

// 添加头部代码
var p = []; p.push('
// 模板主体
');for ( var i = 0; i < users.length; i++ ) { p.push('
  <li>
    <a href="');p.push(users[i].url);p.push('">
      ');p.push(users[i].name);p.push('
    </a>
  </li>
'); } p.push('
// 添加尾部代码
');

这样就得到一段完整到代码：

var p = [];p.push('');
for ( var i = 0; i < users.length; i++ ) { 
  p.push('<li><a href="');
  p.push(users[i].url);
  p.push('">');
  p.push(users[i].name);
  p.push('</a></li>'); 
}
p.push('');

简单实现

使用正则进行替换操作：

function tmpl(templateId, data) { // 模板和传入的数据
  var str = document.getElementById(templateId).innerHTML;
  var string = "var p = []; p.push('" + // 添加头部
  str
  .replace(/[\r\t\n]/g, "") // 消除回车符、水平制表符和换行符的影响，防止解析成代码的时候报错
  .replace(/<%=(.*?)%>/g, "');p.push($1);p.push('") // 使用捕获括号引用对应变量，注意要使用非贪婪模式
  .replace(/<%/g, "');")
  .replace(/%>/g,"p.push('")
  + "');" // 添加尾部
  eval(string); // 执行字符串
  return p.join('');
}
// 调用简单例子模板 tempId 和模拟的数据 users
document.body.innerHTML = tmpl("tempId", users)

这里使用 eval 解析代码，实际上 John Resig 在文章中使用的是 Function 构造函数（Function与eval）。要注意的是： Function 是全局作用域，而 eval 可以访问当前作用域
Function 构造函数版：

function tmpl(templateId) {
  var str = document.getElementById(templateId).innerHTML;
  var fn = new Function("obj",
    "var p = [];p.push('" +
    str
      .replace(/[\r\t\n]/g, "")
      .replace(/<%=(.*?)%>/g, "');p.push($1);p.push('")
      .replace(/<%/g, "');")
      .replace(/%>/g, "p.push('")
    + "');return p.join('');");
  return fn();
}
document.body.innerHTML = tmpl("tempId")

使用 with

当传入的输入结构比较复杂时，总是需要使用 data.xxx 的形式来获取。但使用 with 可以简化路径，直接调用 xxx 即可，而不需要频繁使用 data. 来获取。with用法查看with

var data = {
  users: [
    {"name": "name1", "url": "http://www.baidu.com"}
  ]
}
function tmpl(templateId) {
  var str = document.getElementById(templateId).innerHTML;
  var fn = new Function("obj",
    //  包裹上 with(obj){...}
    "var p = [];with(obj){p.push('" +
    str
      .replace(/[\r\t\n]/g, "")
      .replace(/<%=(.*?)%>/g, "');p.push($1);p.push('")
      .replace(/<%/g, "');")
      .replace(/%>/g, "p.push('")
    + "');}return p.join('');");
  return fn(data);
}

优化

每次调用 tmpl 函数都要调用 new Function，这样效率很低。如果调用 tmpl 函数时返回一个函数，使用该函数时传入不同的数据就可以返回不同的 html 字符串，则可以提高效率

function tmpl(templateId) {
  var str = document.getElementById(templateId).innerHTML;
  var fn = new Function("obj",
    "var p = []; with(obj){p.push('" +
    str
      .replace(/[\r\t\n]/g, "")
      .replace(/<%=(.*?)%>/g, "');p.push($1);p.push('")
      .replace(/<%/g, "');")
      .replace(/%>/g, "p.push('")
    + "');}return p.join('');");
  var template = function (_data) {
    return fn.call(this, _data)
  }
  return template;
};

完整示例：

<!DOCTYPE html>
<html>

<head>
  <title>示例</title>
</head>

<body>
  <div id="container"></div>
  <script type="text/html" id="tempId">
    <%for ( var i = 0; i < users.length; i++ ) { %>
      <li>
        <a href="<%=users[i].url%>">
          <%=users[i].name%>
        </a>
      </li>
    <% } %>
  </script>
  <script>
    function tmpl(templateId) {
      var str = document.getElementById(templateId).innerHTML;
      var fn = new Function("obj",
        "var p = []; with(obj){p.push('" +
        str
          .replace(/[\r\t\n]/g, "")
          .replace(/<%=(.*?)%>/g, "');p.push($1);p.push('")
          .replace(/<%/g, "');")
          .replace(/%>/g, "p.push('")
        + "');}return p.join('');");
      var template = function (_data) {
        return fn.call(this, _data)
      }
      return template;
    };
    var results = document.getElementById("container");
    var data = {
      users: [
        { "name": "name1", "url": "http://www.baidu.com" },
        { "name": "name2", "url": "http://www.baidu.com" },
        { "name": "name3", "url": "http://www.baidu.com" }
      ]
    }
    var compiled = tmpl("tempId");
    results.innerHTML = compiled(data);
  </script>
</body>

</html>

underscore模板引擎的实现

underscore 模板引擎使用的是字符串拼接，而不是使用数组的 push 后再 join 的方法
方法步骤：
1、将 <%=xxx%> 替换成 ‘+ xxx +’
2、将 <%xxx%> 替换成 ‘; xxx __p+=’
3、添加首尾代码
还是那个简单例子：

<script type="text/html" id="tempId">
  <%for ( var i = 0; i < users.length; i++ ) { %>
    <li>
      <a href="<%=users[i].url%>">
        <%=users[i].name%>
      </a>
    </li>
  <% } %>
</script>

先进行替换：

'; for ( var i = 0; i < users.length; i++ ) { __p+='
  <li>
    <a href="'+ users[i].url + '">
      '+ users[i].name +'
    </a>
  </li>
'; } __p+='

然后添加上首尾代码：

var __p='';
width(obj){
  __p+='
    '; for ( var i = 0; i < users.length; i++ ) { __p+='
      <li>
        <a href="'+ users[i].url + '">
          '+ users[i].name +'
        </a>
      </li>
    '; } __p+='
  ';
}
return __p;

这样就得到了完整的字符串__p。但是实际上还有很多细节问题要考虑，其中之一就是特殊字符需要处理。比如转义字符中的行终结符、转义字符前面的斜杠\以及拼接字符串使用单引号'等，这些都有可能使拼接后的字符串__p并不是一个我们能够直接使用的标准字符串（查看转义序列）：在执行构造函数 Function 时行终结符可以导致换行，斜杠\可以导致转义，单引号'可能会与模板的其他内容里含有的单引号进行错误匹配。因而，需要在替换之前就现将模板里的内容进行处理。
之前使用/<%=(.*?)%>/g来匹配符合<%=xxx%>的所有字符，但是.匹配的是除行终结符之外的任何单个字符，真正要匹配任意字符需要使用 [\d\D]、[\w\W]、[\s\S] 或 [^] （查看《JS正则迷你书（1.1版）》笔记）。

// 匹配规则
var settings = {
  // 求值
  evaluate: /<%([\s\S]+?)%>/g,
  // 插入
  interpolate: /<%=([\s\S]+?)%>/g,
};

// 特殊字符处理
var escapes = {
  "'": "'",
  '\\': '\\',
  '\r': 'r',
  '\n': 'n',
  '\u2028': 'u2028',
  '\u2029': 'u2029'
};

var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;

var templ = function(text) { // 传入完整的模板内容
  // 添加首部代码
  var source = "var __p='';\n";
  source = source + "with(obj){\n"
  source = source + "__p+='";
  var main = text
  .replace(escapeRegExp, function(match) { // 给特殊字符添加'\'
    return '\\' + escapes[match];
  })
  .replace(settings.interpolate, function(match, interpolate){
    return "'+\n" + interpolate + "+\n'"
  })
  .replace(settings.evaluate, function(match, evaluate){
    return "';\n " + evaluate + "\n__p+='"
  })
  source = source + main + "';\n }; \n return __p;";
  var render = new Function('obj',  source);
  console.log(render) // 在拼接字符串时添加换行符 \n 使得 render 结构清晰
  return render;
};

处理完特殊字符，还有一类特殊值要处理：如果模板里的某个变量在提供的数据里是没有的的话会显示 undefined，但实际上我们期望它是空字符串。这里我们要对所有属性添加一个判断：当该属性不存在时就设置为空字符串

1
2
3

.replace(settings.interpolate, function(match, interpolate){
  return "'+\n" + (interpolate == null ? '' : interpolate) + "+\n'"
})

实际上 underscore 使用了这样的方法：

var source = "var __t, __p='';\n";
...
.replace(settings.interpolate, function(match, interpolate){
  return "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'" // 把值赋给 __t，然后判该属性是否有可用的值，有就使用 __t，没有就使用空字符串''
})

而且 underscore 使用 replace 方法只进行了一次匹配：

var settings = {
  // 求值
  evaluate: /<%([\s\S]+?)%>/g,
  // 插入
  interpolate: /<%=([\s\S]+?)%>/g,
};
var template = function (text) {
  var matcher = RegExp([
    (settings.interpolate).source,
    (settings.evaluate).source
  ].join('|') + '|$', 'g');
  // matcher 为 /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g
  var index = 0; // 索引起始为 0
  var source = "__p+='";

  text.replace(matcher, function (match, interpolate, evaluate, offset) {
    source += text.slice(index, offset).replace(escapeRegExp, function (match) {
      return '\\' + escapes[match];
    });
    index = offset + match.length;
    if (interpolate) {
      source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
    } else if (evaluate) {
      source += "';\n" + evaluate + "\n__p+='";
    }
    return match;
  });

  source += "';\n";
  source = 'with(obj||{}){\n' + source + '}\n'
  source = "var __t, __p='';" + source + 'return __p;\n';
  var render = new Function('obj', source);
  return render;
};

思路就是把依据 replace 第一个参数是正则表达式，并且其为全局匹配模式时，第二个参数的函数会被多次调用(《JS正则迷你书（1.1版）》笔记 2) 替换)，不断复制字符串，处理字符串，拼接字符串，最后拼接首尾代码，得到最终的代码字符串
正则表达式的 source 属性返回正则的内容字符串，即两个斜杠之间的内容（《JS正则迷你书（1.1版）》笔记 10) source 属性）。此外，只匹配要替换的变量的话会造成模板最后一个变量之后的代码丢失，因而还要匹配最后位置$以便 slice(index, offset) 截取到最后一个字符。
完整代码：

<!DOCTYPE html>
<html>

<head>
  <title>示例</title>
</head>

<body>
  <div id="container"></div>
  <script type="text/html" id="tempId">
    <%for ( var i = 0; i < users.length; i++ ) { %>
      <li>
        <a href="<%=users[i].url%>">
          <%=users[i].name%>
        </a>
      </li>
    <% } %>
  </script>
  <script>
    var settings = {
      // 求值
      evaluate: /<%([\s\S]+?)%>/g,
      // 插入
      interpolate: /<%=([\s\S]+?)%>/g,
    };
    var escapes = {
      "'": "'",
      '\\': '\\',
      '\r': 'r',
      '\n': 'n',
      '\u2028': 'u2028',
      '\u2029': 'u2029'
    };
    var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;
    var tmpl = function (text) {
      var matcher = RegExp([
        (settings.interpolate).source,
        (settings.evaluate).source
      ].join('|') + '|$', 'g');
      var index = 0;
      var source = "__p+='";
      text.replace(matcher, function (match, interpolate, evaluate, offset) {
        source += text.slice(index, offset).replace(escapeRegExp, function (match) {
          return '\\' + escapes[match];
        });
        index = offset + match.length;
        if (interpolate) {
          source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
        } else if (evaluate) {
          source += "';\n" + evaluate + "\n__p+='";
        }
        return match;
      });
      source += "';\n";
      source = 'with(obj||{}){\n' + source + '}\n'
      source = "var __t, __p='';" +
        source + 'return __p;\n';
      var render = new Function('obj', source);
      return render;
    };

    var results = document.getElementById("container");
    var data = {
      users: [
        { "name": "name1", "url": "https://www.baidu.com/" },
        { "name": "name2", "url": "https://www.baidu.com/" },
        { "name": "name3", "url": "https://www.baidu.com/" }
      ]
    }
    var text = document.getElementById('tempId').innerHTML;
    var compiled = tmpl(text);
    var html = compiled(data);
    results.innerHTML = html
  </script>
</body>

</html>

至此，代码跟 underscore 里的实现已经很接近了，但它还有更多的细节处理。具体请看Underscore.js 1.9.2