两个灵活高效的javascript模板渲染函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    /**
     * 简单的渲染模板的函数
     * @method
     * @param {String} tpl 待渲染的模板
     * @param {Array | Object} data 渲染到模板里的数据
     * @type String
     * @example
            N.tpl('<a target="_blank" href="http://blog.sina.com.cn/u/{0}">{1}</a>', [18277423, '苍老师的博客']);
            //返回 '<a target="_blank" href="http://blog.sina.com.cn/u/18277423">苍老师的博客</a>'


            N.tpl('<a target="_blank" href="http://blog.sina.com.cn/u/{uid}">{blogname}</a>', {
                uid: 18277423,
                blogname: '苍老师的博客'
            });
            //返回 '<a target="_blank" href="http://blog.sina.com.cn/u/18277423">苍老师的博客</a>'
     */
    N.tpl = function(tpl, data){
        return tpl.replace(/{(w+)}/g, function(all, match){
            return data[match];
        });
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
N.template0 = function(tpl, arrData, mix){
	if( !arrData || !arrData.length ){
		return '';
	}
	tpl = tpl.replace(/[rnt]/g, '');
	var ret = '',
		hasMix = mix!==undefined,
		i = 0, len = arrData.length,
		datai, mixdata, p,
		rw = /{(w+)}/g, rS = /{=([^}]+)}/g;

	var repw = function(all, match){
		return datai[match];
	};
	var repS = function(all, match){
		match = match.replace(/'/g, "\'").replace(/[|]/g, "'");
		return (new Function('$', 'return '+match))(datai);
		//try{return (new Function('$', 'return '+match))(datai)}catch(e){return ''}
	};

	for(; i<len; i++){
		datai = arrData[i];
		
		if(hasMix){
			mixdata = mix(datai, i);
			for(p in mixdata){
				datai[p] = mixdata[p];
			}
		}
		
		ret += tpl.replace(rS, repS).replace(rw, repw);
	}
	return ret;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
N.template = function(tpl, arrData, mix){
	if( !arrData || !arrData.length ){
		return '';
	}
	tpl = tpl.replace(/[rnt]/g,'').replace(/'/g,"\'").split('{');
	
	var ret = '',
		hasMix = mix!==undefined,
		i, len = tpl.length,
		evaluate,
		sous,
		source = "return '"+tpl[0]+"'",
		datai, mixdata, p;

	for(i=1; i<len; i++){
		sous = tpl[i].split('}');
		source = source +(sous[0].indexOf('$')===-1?"+$."+sous[0]:
			"+("+sous[0].replace(/[|]/g,"'")+")")+"+'"+sous[1]+"'";
	}
	//console.log(source);
	evaluate = new Function('$', source);

	for(i = 0, len = arrData.length; i<len; i++){
		datai = arrData[i];
		
		if(hasMix){
			mixdata = mix(datai, i);
			for(p in mixdata){
				datai[p] = mixdata[p];
			}
		}
		
		ret += evaluate(datai);
	}
	return ret;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script id="tpl" type="text/templete">
	<div id="luck_box">
		<div id="ava_list">
			<div id="aa1023">{head}</div>
			<div id="aa1023">{name}</div>
			{$.abx ? [
			<div id="aa10211"><img src="logo.jpg" />abxxxxxxxxxxxxxx</div>
			<div id="aa10212"><img src="logo.jpg" /></div>]
			: [
			<div id="aa1024"><img src="logo.jpg" />no abx</div>
			<div id="aa1025"><img src="logo.jpg" /></div>
			]
			}
		</div>
	</div>
</script>

1
2
3
4
5
6
7
8
9
var tpl = '<li>'
	+ '<div class="headPic"><a href="{domain}" title="{name}"><span></span></a>'
		+ '<img alt="" src="{head}" width="60" height="60"/>'
	+ '</div>'
	+ '<div class="feedCon">'
			+ '<span>{$.abx?[这是奇数行]+$.name:[偶的]}</span>'
			+ '<span>{ $.abc===5 ? [是5] : [是]+$.abc }</span>'
	+ '</div>'
+ '</li>';

1
2
3
4
5
6
7
var datas = [
	{domain:'domainshit', name:'FLM', head:'headdffdddd',ab:3},
	{domain:'dodshit', name:'FLMMjj', head:'he788ddd',ab:2},
	{domain:'dode3errrrrtshit', name:'FL4MMjj', head:'he78y70008ddd',ab:5},
	{domain:'dors2dshit', name:'FL3MMjj', head:'he78811ddd',ab:2},
	{domain:'doma', name:'FffLM', head:'he2addd',ab:3}
];

1
2
3
4
5
6
function mix(d,i){
	return {
		abx: i&1,
		abc: d.ab+2
	};
}

1
2
//N.template(tpl, datas, mix);
N.template(document.getElementById('tpl').innerHTML, datas, mix);