javascript的简单模板替换

维护一些老项目的时候，有时候会出现特别神奇的代码，比如

$('#title').text(data.title);
$('#content').text(data.content);
$('#author').text(data.author);
复制代码

如上几行还是可以接受的，但是如果是20行呢？40行呢？

所以针对这种情况写了一个模板函数:

function render(tpl, dataObj){
    return tpl.replace(/{{\s*(.*?)\s*}}/g, function(context, objKey){
        return dataObj[objKey] || '';
    })
}
复制代码

灵活使用

<div id="tpl">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
</div>
复制代码

let dataObj = {
    title: '标题内容',
    content: '正文内容'
}
let tpl = document.querySelector('#tpl')
let html = render(tpl.innerHTML, dataObj)
tpl.innerHTML = html
复制代码

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