自定义简单的JS模板遍历

将Ajax返回来的数据拼成HTML字符串以往常用“ += ”拼接而成，当字符串较长时不方便阅览和修改，想通过模板遍历的方式实现而又不愿为此引入模板引擎JS库，所以自己写了个简单的方法将数据和模板分离。

模板中将变量使用同一前缀加变量名的方式替换，遍历时使用 replace 正则匹配替换成返回的数据。

模板示例：

//模板示例：
var tplli = '<a data-id="item.sid">item.sname</a>';

// 服务端返回的数据格式如：
// {"status":1,"message":"success","data":[{"sid":"1","sname":"test"},{"sid":"2","sname":"test2"}]}
$.getJSON(url, function(res){
	if(res.status == 1){
		if(res.data){
			var s = buildTemplate(res.data, tplli);
			console.log(s);
		}
	}
});

遍历模板的方法：

/**
 * 遍历模板
 * @author Shi Xue
 * @param object data
 * @return string
 */
function buildTemplate(data, tpl){
	var olihtml = '', rval = '';
	if(data){
		$.each(data, function(i, item){
			//正则  g 全局标志
			//这里 function 只能匿名函数， 参数顺序须 $0, $1, ...,$n
			olihtml += tpl.replace(/item\.(\w+)/g, function($0, $1){
							rval = '';
							//不可在 each 中 return
							$.each(item, function(k, val){
								if(k == $1) rval = val;
							});
							return rval;
						});
		});
	}
	return olihtml;
}

关于 replace 正则和匿名函数参数的类似问题，在手册 exec 方法中有说明：
如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。