来看这样一个模板
<p><a href="{0}" alt={1}>{2}</a></p>
我们要把链接指向www.xx.com和alt内容 personal blog 和链接文本sysuzhyupeng填充进去怎么办?我们通常会设计这样一个函数
var str = '<p><a href="{0}" alt="{1}">{2}</a></p>';
function Template(){
var arg = arguments;
str = str.replace(/\{(\d+)\}/g, function(a, b){
console.log(b) // 0, 1, 2...
return arg[b];
})
}
Template('www.xx.com', 'personal blog', 'sysuzhyupeng');
我们知道replace的第二个参数可以是个回调函数,这个函数的第一个参数是匹配到的字符串,如果有分组,接下来的参数就是匹配到的分组。然后是匹配到的字符串的位置,最后是被匹配的字符串。
然后将传入 Template 的参数arguments 传入replace函数中,对模板字符串进行批量替换,str 现在就是替换之后的字符串
str // '<p><a href="www.xx.com" alt="personal blog">sysuzhyupeng</a></p>'
这样就实现一个简单的模板引擎。现在就是替换之后的字符串
本文介绍了一个简单的模板引擎实现方法,通过JavaScript函数实现占位符的批量替换,展示如何使用正则表达式和函数回调来构建动态HTML内容。
218

被折叠的 条评论
为什么被折叠?



