javascript的簡單模板替換

Alongite發表於2018-09-04
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
複製程式碼

相關文章