开发过程中经常使用字符串拼接,这样做工作效率低,可维护性和易读性也比较差,
且对于后台程序员对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数据!');
}
};

封装JSON数据转自定义HTML方法parseHTML的更多相关文章

  1. Java构造和解析Json数据的两种方法详解二

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...

  2. 使用Map List 封装json数据

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  3. 二、用Delphi10.3 创建一条JSON数据的第二种方法,并格式化输出

    一.用Delphi10.3构造一个JSON数据的第二种方法,并格式化输出,代码如下: uses //System.JSON, System.JSON.Types, System.JSON.Writer ...

  4. Java构造和解析Json数据的两种方法详解二——org.json

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...

  5. Java构造和解析Json数据的两种方法详解一——json-lib

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/23/3096001.html 在www.json.org上公布了很多JAVA下的jso ...

  6. Android中使用Gson解析JSON数据的两种方法

    Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下   Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...

  7. Java构造和解析Json数据的两种方法详解一

    一.介绍 JSON-lib包是一个beans,collections,maps,java arrays 和XML和JSON互相转换的包,主要就是用来解析Json数据,在其官网http://www.js ...

  8. java 后台封装json数据学习总结(一)

    一.数据封装 1. List集合转换成json代码 List list = new ArrayList(); list.add( "first" ); list.add( &quo ...

  9. Java解析复杂JSON数据的一种方法

    1.需解析JSON数据: { "code": 0, "message": "success", "sid": " ...

随机推荐

  1. [转]申瓯 JSY2000-06 程控电话交换机呼叫转移设置

    说明:若申瓯程控电话交换机分机有事不在位置上或遇忙分机正忙时为使某些重要来话不丢失,可设置将呼入本机的电话转移至其他分机及公网固定电话或手机.电话交换机使用了本功能不管分机用户在什么地方都能接听到办公 ...

  2. PAT甲题题解-1128. N Queens Puzzle (20)-做了一个假的n皇后问题

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789810.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  3. 2013337朱荟潼 Linux第二章读书笔记——从内核出发

    1.获取内核源码 1.1Git 分布式的:下载和管理Linux内核源代码: - 获取最新提交到版本树的一个副本 $ git clone git://git.kernel.org/pub/scm/lin ...

  4. HTTP 和 HTTPS 直观上看哪里不一样了

    1. 我在自己搭建的 HTTP 网站上进行登陆测试 填写账号和密码,账号:123456 ,密码:654321 (当然是乱填的,只为了看传输数据) 点击登录,用wireshark抓包看看传输的数据 2. ...

  5. Beta冲刺——day6

    Beta冲刺--day6 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...

  6. final发布48小时用户调查报告

    小组名称:飞天小女警 项目名称:礼物挑选小工具 小组成员:沈柏杉(组长).程媛媛.杨钰宁.谭力铭 调查问卷标题:用户调查报告 调查目的:在final版本发布后的用户调查报告 调查问卷的数量:11 问卷 ...

  7. Spring源码学习:DefaultAopProxyFactory

    /* * Copyright 2002-2015 the original author or authors. * * Licensed under the Apache License, Vers ...

  8. spring动态数据源+事务

    今天在尝试配置spring的动态数据源和事务管理的时候,遇到了几处配置上的问题,在此记录下: 1.使用了spring的aop思想,实现了动态数据源的切换. 2.spring的事务管理,是基于数据源的, ...

  9. everything 提供http和ftp的功能

    1. 早上起床看知乎,发现everything 有http和ftp的功能, 简单看了一下的确很强大.. 就是有点危险.. 功能位置. 2. 最下面有FTP和HTTP 可以进行启用 这是http的 建议 ...

  10. maven的pom.xml举例

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...