前言:前端现在的js框架层出不穷,而dom渲染的不同方式也是我们在实际开发中经常遇到的。模板渲染的方式,让我们从开发到维护dom变得简单轻松起来。 前端模板引擎JsRender ,jq的插件jQuery.tmpl ,ng中的mvvm模式……。
随便写写,纯属娱乐。
字符串模板:'<a href="{0}">{1}-{2}</a>'
需要替换的变量:'http://www.baidu.com','百度','中国'
我们现在需要达到的效果就是,将这三个字符串,分别一 一对应字符串模板中的{0},{1},{2}
进行替换,达到的效果为:
<a href="http://www.baidu.com">百度-中国</a>
思路:将{}
替换为变量,首先我们想到的是什么?是的,正则,使用正则匹配{}
,把{}
检索出来并替换成对应的字符串。
先上代码
<div id="container"></div>
<script type="text/javascript">
(function(window){
function fun(str){
this.str = str;
}
fun.prototype.format = function(){
var arg = arguments;
return this.str.replace(/\{(\w+)\}/g, function(a,b){
return arg[b] || '';
});
}
window.fun = fun;
})(this);
(function(){
var tpl = '<a href="{0}">{1}-{2}</a>';
var result = new fun(tpl).format('http://www.baidu.com','百度','中国');
document.querySelector('div#container').innerHTML = result;
})();
</script>
运行结果:
<div id="container"><a href="http://www.baidu.com">百度-中国</a></div>
代码解释:
(function(window){
//构造函数
function fun(str){
this.str = str;
}
//函数扩展方法
fun.prototype.format = function(){
//获取函数参数
var arg = arguments;
/*
replace的高级用法:
第一个参数,是正则匹配类似 {a} 的字符串
第二个参数,取函数的返回值,这里的a代表正则表达式所匹配的正则模式,即{0},{1},{2},
b代表着正则模式中的表达式即 0,1 ,2
function(a,b){
//return
}
*/
return this.str.replace(/\{(\w+)\}/g, function(a,b){ return arg[b] || ''; });
}
//全局声明fun
window.fun = fun;
})(window);
(function(){
//字符串模板
var tpl = '<a href="{0}">{1}-{2}</a>';
//执行函数,format内部的是3个字符串将一一对应tpl中相应的字符串模板
var result = new fun(tpl).format('http://www.baidu.com','百度','中国');
//将结果展示在div中
document.querySelector('div#container').innerHTML = result;
})();