超轻量模板引擎

还在痛苦的手工拼接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;
  })
}
复制代码

完整DEMO

<div id="output"></div>
<script id="waitRender" type="text/plain">
    <h1>{{title}}</h1>
    <p>{{content.boy.name}}</p>
</script>

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

var template = document.getElementById('waitRender').innerHTML;
var data = {
  title: 'Hello TPL !!!',
  content: {
    boy: {
      name: 'author calvin'
    }
  }
};
document.getElementById('output').innerHTML = render(template, data);
</script>
复制代码

转载于:https://juejin.im/post/5aba69636fb9a028b92d2c4a