封装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数据！');
        }
};