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第二个参数，可以是字符串，也可以是函数。是函数就默认把匹配到的内容传递过去。用法细节可以http://www.w3school.com.cn/js/jsref_replace.asp猛点看看。。。
解释完了，现在需求来了，比如刚才那个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下，回头在编回去。

评论

4 楼 erricwang 2009-09-20  

wh8766 写道

看起来不错~
有机会实践~

嗯，正则表达式，很有意思。

3 楼 erricwang 2009-09-20  

yiminghe 写道

建议使用 Ext.template

稍后，看看ext的实现，里面的实现细节，肯定有很多引以为拜读的地方。
框架是个好东西，只是，我这个菜鸟涉及的项目都小，所有js的体积加起来还不够框架本身的体积大。嘿嘿，如果用，着用公司统一部署的框架，大家的项目都用到的，缓存来得快，放到省了流量。

2 楼 yiminghe 2009-09-20  

建议使用 Ext.template

1 楼 wh8766 2009-09-19  

看起来不错~
有机会实践~