封裝JSON數據轉自定義HTML方法parseHTML - fengyuqing－IT工程師數位筆記本

文章出處

開發過程中經常使用字符串拼接，這樣做工作效率低，可維護性和易讀性也比較差，
且對于后臺程序員對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數據！');
        }
};