封装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
10 }];
11 var template = '姓名：{name},性别:{sex};<br>';
12 var html = parseHTML(template, json,function(key, val){
13     //如果是{sex}对应的数值返回相应的文字
14     if(key == 'sex'){
15         return ['保密','男','女'][val+1];
16     }
17     return val;
18 });

 

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  */
10 function parseHTML(template, json, fn, result){
11         result = result || '';
12         if(Object.prototype.toString.call(json) === '[object Array]'){
13             var first = json.shift();
14             result += template.replace(/\{([^{}]+)\}/g, function(match, key) {
15                         var val = first[key];
16                         if(fn){
17                             return fn(key, val);
18                         }
19                         return val !== undefined ? val : '';
20             });
21             return json.length !== 0 ?
22                    parseHTML(template, json, fn, result) : //递归
23                    result;
24         }else{
25             alert('只接收数组形式的JSON数据！');
26         }
27 };

 

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

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