前言

我们在写Vue时，我们都是将HTML代码写在template中。在写React时，我们是将在HTML代码写在return中。这时候肯定就有小伙伴好奇了，为什么我们写的Vue或React时，我们写的HTML代码可以自动编译成浏览器能读的懂得格式，那些指令又是怎么实现的呢？ 为什么我们可以直接用呢? Vue和React是定义了一套怎样的模板引擎帮助我们编译的呢？那带着这些疑问，我就和小伙伴们聊一聊模板引擎是个什么东西。

模版引擎的简介

首先，模板引擎是一种用于生成动态内容的工具。它是将模板文件与数据进行结合，生成一个最后的输出结果，通常是用于构建Web应用程序的视图层。 也就是输出成浏览器页面。

模板引擎的基本原理就是通过将模板文件中的占位符或者标记({xxx})替换成实际的数据，然后生成最终的文本或HTML代码。 占位符可以是变量、语句等等，它是用于帮助我们轻松的将逻辑和展示分离开，提高我们的开发效率。

模版引擎的实现

接下来，我来带大家实现一个简单的模板引擎。我们来看如下一段代码：

function template(str) {
    return function (obj) {
      let arr = []
      let reg = new RegExp(`{{\\s*(.+?)\\s*}}`)  // {{ xxxx }}
      while (str.length) {
        let res = reg.exec(str)
        if (res) {
          let noMatch = str.slice(0, res.index)
          str = str.slice(res.index)
          arr.push(`_s('${noMatch}')`)
          arr.push(`_getValue('${res[1]}')`)
          str = str.slice(res[0].length)
        } else {
          arr.push(`_s('${str}')`)
          str = ''
        }
      }

      obj._getValue = function(key) {
        return this[key]
      }

 
      obj._s = function(val) {
        if (typeof val === 'object') return JSON.stringify(val)
        return val
      }
      
      let code = arr.join('+')
      let render = new Function(`with(this){return _s(${code})}`)
      let template = render.call(obj)
      return template
    }
}
var tpl = template('<p>hello there {{ name }} {{age}}</p>')
let res = tpl({ age: 18, name: 'Tom' })
console.log(res);  // <p>hello there Tom 18</p>

在上述代码中定义了一个模板函数，然后我们通过正则匹配exec方法，来将传入的模板中的占位符匹配到，并得到一个完整的匹配结果。我们在根据匹配到的结果，去调用我们定义的_getValue方法，将占位符替换掉，最后我们得到的结果数组合并成一个字符串返回给浏览器解析。这样我们就可以通过调用我们定义的模板引擎，实现模板文件和数据结合。

模板引擎给我们带来的好处是：