封装JSON数据转自定义HTML方法parseHTML

开发过程中经常使用字符串拼接，这样做工作效率低，可维护性和易读性也比较差，
且对于后台程序员对html不熟悉，经常出错。
如下面例子json转字符串：

var json = [{
href:'http://www.cnblogs.com/dreamback/',
title: 'dreamback\'s blog',
text: 'dreamback'
}, {
href:'http://www.cnblogs.com/dreamback/',
title: '孟回头的博客',
text: '孟回头'
}];

传统拼接：

var html = '';
for(var i = 0 , len = json.length ; i < len ; i++){
html += '<a href="'+href+'" title="' + title +'">' + text + '</a>';
}

要是可以这样：

var template = '<a href="{href}" title="{title}">{text}</a>';
var html = parseHTML(template, json);

字符串中｛key｝对应json中key的值，直接转换想要的字符串，显得简单的了！
是json中的值返回的结果有多种情况我们可以这么来：

var data = [{
name:'蜡笔小新',
sex:0
},{
name:'小丸子',
sex:1
},{
name:'凹凸曼',
sex:-1
}];
var template = '姓名：{name},性别:{sex};<br>';
var html = parseHTML(template, json,function(key, val){
//如果是{sex}对应的数值返回相应的文字
if(key == 'sex'){
return ['保密','男','女'][val+1];
}
return val;
});

parseHTML函数的源码：

/**
* JSON数据转自定义HTML.
* @param  {String} template 模版参数模版的变量名要与JSON的key值对应，
*                           且模版的变量名要用"{}"包住。
* @param  {Object} json     JSON数据，只接收类似[{},{}...]格式的JOSN。
* @param  {String} result   开头默认的字符串，也被内部递归利用。
* @param  {Function} fn     回调函数前面两个参数分别对应json的key和value
* @return {String}          返回转义的HTML。
*/
function parseHTML(template, json, fn, result){
result = result || '';
if(Object.prototype.toString.call(json) === '[object Array]'){
var first = json.shift();
result += template.replace(/\{([^{}]+)\}/g, function(match, key) {
var val = first[key];
if(fn){
return fn(key, val);
}
return val !== undefined ? val : '';
});
return json.length !== 0 ?
parseHTML(template, json, fn, result) : //递归
result;
}else{
alert('只接收数组形式的JSON数据！');
}
};