林秀栋的技术博客

设计模式(二十) 简单模板模式

//用字符串模板创建视图,避免过多dom操作。
//模板渲染方法
A.formateString = function(str, data){
	return str.replace(/\{#(\w+)#\}/g, function(match, key){
		return typeof data[key] === undefined ? '' : data[key]
	});
}
A.view = function(name){
	//模板库
	var v = {
		img: '<img src=”{#src#}”/>',	//图片模板
		//。。。这里还可以增加其他模板
		theme: [	//组合模板
			'<div>',
				'<h1>{#title#}</h1>',
			'</div>'
		].join(''),
	}
	//若参数是数组,返回多行模板
	if(Object.protorype.toString.call(name) === '[object Array]'){
		var tpl = '';
		for( ){
			tpl += arguments.callee(name[i]);
		}
		return tpl;
	}else{	//若有模板返回模板,否则返回简易模板
		return v[name] ? v[name] : ('<'+name+'>{#'+name+'#</'+name+'>');
	}
}
var x1 = A.view('ul');
var x2 = A.formateString(A.view('li'),{li: A.view(['strong', 'span'])});