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

开发过程中经常使用字符串拼接，这样做工作效率低，可维护性和易读性也比较差，

且对于后台程序员对html不熟悉，经常出错。后来得到灵感，再添了个改进版：《原生JS不到30行，实现类似javascript MVC的功能-minTemplate》

如下面例子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中的值返回的结果有多种情况我们可以这么来： 1 var data = [{
2 name:'蜡笔小新',
3 sex:0
4 },{
5 name:'小丸子',
6 sex:1
7 },{
8 name:'凹凸曼',
9 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函数的源码：

1 /**
2 * JSON数据转自定义HTML.
3 * @param {String} template 模版参数模版的变量名要与JSON的key值对应，
4 * 且模版的变量名要用"{}"包住。
5 * @param {Object} json JSON数据，只接收类似[{},{}...]格式的JOSN。
6 * @param {String} result 开头默认的字符串，也被内部递归利用。
7 * @param {Function} fn 回调函数前面两个参数分别对应json的，key 可 value
8 * @return {String} 返回转义的HTML。
9 */
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数据！');
}
};

转载请注明出处：http://www.cnblogs.com/dreamback

如有任何建议或疑问，欢迎留言讨论。