javascript的简单模板替换

155 阅读1分钟

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

$('#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