还在痛苦的手工拼接HTML？

使用模板引擎渲染出目标HTMl，避免手工拼接的错误，同时增加模板代码的可读性。

话不多说，先看代码，此demo实现了一个轻量的模板引擎。

模板引擎的核心

正则表达式的单元匹配，以及replace函数。

模板采用双大括号的形式来标识此处是模板插槽，匹配到的可以是一个变量，同时也可以是对象访问属性。

replace函数第二个参数，支持传入function配合正则的匹配。

/{
   {((\w+\.?)+)}}/g复制代码

正则表达式当中一个括号代表一个匹配组

\w 匹配字母、数字、下划线。等价于[A-Za-z0-9_]

+ 匹配前面的子表达式一次或多次

？ 匹配前面的子表达式零次或一次

render 函数的实现

支持对象的属性访问

function render(tpl, data) {  var reg = /{
    {((\w+\.?)+)}}/g  return tpl.replace(reg, function(matchItem, keyName) {    let keys = keyName.split('.');    if (keys.length === 1) return data[keys[0]];    let res = data;    for (let item of keys) {      res = res[item];    }    return res;  })}复制代码

完整DEMO

    
复制代码