超轻量模板引擎

还在痛苦的手工拼接HTML？

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

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

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;
    })
}