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