前端模板引擎的实现总结

参考链接：https://juejin.im/post/59663eaa6fb9a06ba73d4c35

阅读这篇文章后，发现前端模板引擎的实现其实也并不是很难，我们现在一步步来分析。

1、原始拼接html片段：

var author = 'me';
var html = `<p>my name is ${author}</p>`; 复制代码

缺点：手动拼接字符串比较容易出错，并且浏览拼接速度较慢。

2、既然容易出错，拼接慢，是否有另一种替代方案呢？答案就是数组转字符串，join()方法

var author = 'me';
var result = ['<p> my name is ', author, '</p>'].join('');复制代码

下面根据第二种方案来解决模板问题：例如

// 模板编译函数
function TemplateEgine(tpl, data) {
  
}
//
function Test() {
  this.id = 'test';
  this.data = { 
    name: 123465
  }
  this.result = [];
}

var tpl = '<p>my name is <% id %> </p>';
var test = new Test();
TemplateEgine(tpl, test.id);

// 分析
1)对于这种单一变量的替换，自然想到使用正则表达式来替换掉占位符的内容，然后替换真正的值，结果为：

result.push('<p> my name is');
result.push(test.id);
result.push('</p>');

但是如果变量是嵌套呢？例如：

var tpl = '<p><% id %>my name is <% data.name %> </p>';
var test = new Test();
TemplateEgine(tpl, {
  id: test.id,
  data: test.data
});

我们不能再单纯替换了，而是应该执行占位符里面的代码，能够执行js代码的，方法时eval和 new Function(),
一般new Function性能比evel好，这里采用Function。
还是使用数组保存：

result.push(this.id);
result.push('<p> my name is');
result.push(this.data.name);
result.push('</p>');
new Function('return this.result.join("")').call(test);
// 由于 new Function执行是创建一个匿名函数，作用域是全局的，所以要指定this

2)虽然解决变量的问题，但是如果是遇到复杂的语句，if for 等，如果push到数组去，不能执行，因此需要根据
正则表达式来判断是复杂语句还是变量，如果是变量直接替换，如果是复杂语句先执行里面内容，将执行结果push到
数组，转为变量这种情况。例如：

<% for (var i = 0; i < 11; i++) {%>
<p><% i %></p>
<%}%>

结果：
for (var i =0; i < 11; i++) {
  result.push('<p>');
  result.push(this.i);
  result.push('</p>');
}
new Function('return this.result.join("")').call(test);

总结：对于变量直接替换，对于复杂语句先执行，转为变量这种情况，两者使用 new Function来执行，由于是全局
作用域，所以需要绑定this.

区别：vue react模板引擎是带指令的，会把其转为AST树，过程比上面更复杂，待续。。。复制代码