javascript模板替换的一些事儿

最近在搞的一个项目,涉及到大量重复内容的填充。前台是静态页面,用js来完成。抽象一下这个问题:
1、大量相似内容。数据库里头的记录、xml(还是别xml了)、json,json最实在。
2、变成html,写到页面中去。
这是问题模型,模板替换呢:
1、获得模板格式:都可以看成一个长长的字符串,里面包含一些特殊的标记,用于被数据集代替。
2、按照特定的规则代替 模板字符串的特殊标记。
3、将替代结束的字符串返回去。js就innerHTML到特定的位置了。
yeshino说他有个模板类,我就毫不犹豫的拿过来用了,经过几个版本的改进确实挺好用的。
模板替换第一条,获取用于替换的字符串,一般就是在html页面内,放置一个特定的dom元素,让它display:none;获取它的innerHTML就行了。yeshino的模板放置很哟意思,放在了一个<textarea>标签里面,好处就是,这个标签里面的内容不会被浏览器解析,进而省去了模板被浏览器解析的时间(否则,模板也会被解析成dom,有意思。另外,好像也可以写在注释里面)。第三步回填也简单,主要就是第二块替换的板块。看代码:

var tpl='xxxxxxxxx{id}xxx{nb}xxx';
var _json={id:'yyy',nb:'ttt'};
var str=tpl.replace(/{(\w+)}/g,function($0,$1){return _json[$1];});

哈哈,搞定了,很简单吧。核心在中间那个正则表达式的替换。
解释:
replace的第一个参数用于匹配字符串中,像'{中间是字母}'单引号之内的形式的子字符串。如:{id},{nb},{bn}等等。
replace第二个参数,可以是字符串,也可以是函数。是函数就默认把匹配到的内容传递过去。用法细节可以[url]http://www.w3school.com.cn/js/jsref_replace.asp[/url]猛点看看。。。
解释完了,现在需求来了,比如刚才那个id,现在我有一个图片地址,要通过id经过一定的转换变来。比如:

var tpl='<img id={id} src={url} alt='{nb}'>;
var _json={id:'yyy',nb:'ttt',url:'http://pp.com/yyy.jpg'};
var str=tpl.replace(/{(\w+)}/g,function($0,$1){return _json[$1];});
//注意_json里面的id和url,假设
//var tf=(function(){//不用看这行

//_json中,id和url存在一定的关系。url通过id变过来的。
function url(id){
return 'http://pp.com/'+id+'.jpg';
};

//return {url:url};
//})();



有没有办法,剩去_json中的那项url呢?嘿嘿,肯定是。昨天,听tenf的伟大js分享,说到模板函数这个概念,就是对json中的数据项,做一些处理然后在传回给模板。tenf写出的方法强大无比,确实很强大,细节我就不介绍了,反正很强大。
嘿嘿,回头,根据我小项目的需求,按照这个思路走下去,稍在上面的代码上加些代码,先用着。看代码:


//var tpl='<img id={id} src={url} alt='{nb}'>;
var tpl='<img id={id} src=[_url({id})_] alt='{nb}'>;//注意模板变化

var _json={id:'yyy',nb:'ttt'};

//var str=tpl.replace(/{(\w+)}/g,function($0,$1){return _json[$1];});这是原来的代码
var str=tpl
.replace(/{(\w+)}/g,function($0,$1){return _json[$1];})
.replace(/\[_(\w+)\((\w+)\)_\]/g,function($0,$1,$2){return window[$1]($2);});

//var tf=(function(){//不用看这行

function url(id){
return 'http://pp.com/'+id+'.jpg';
};

//return {url:url};
//})();


嘿嘿,搞定。还是正则表达式,一个替换出来的是函数名称,第二个是函数的参数。搞定这个问题。
对于,很多数据,替换的问题,用两个循环就行了,上面说道的代码是核心。
以上说到的是简单的说明中间有很多要改进的地方,如参数有多个等。调用的函数最好也写成这样
function($0,$1,$2){
return window[$1]?window[$1]($2):$0;

如果没有替换函数,返回原来的字段,莫替换了。

好,写到这里了。javaeye上的第一篇技术总结blog搞定。
PS:
上面代码是临时跟着写用来说明的,没测试。:(运行不行,莫郁闷,嘿嘿。
模板这个还要注意下,最好encodeURIComponent下,回头在编回去。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值