大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说json 格式化（json格式化教程）,希望您对编程的造诣更进一步.
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。在如今的软件编程中越来越重要，不管你是开发web还是app，其数据格式是一定会使用的。
今天我们就手写一款JSON格式化工具。
主要是用html，js和css，简单几行代码就写出一个自己的json格式化工具，显示样式可以自己控制，简洁、方便、好用。而且拿出来还能装逼。
先看一下完成时的效果：
这里样式我选择css控制成极简风格的，只要一个格式控制和颜色控制。毕竟写代码的时候不想被视觉污染。
感觉基本的功能都有了，格式化，缩进量，是否显示引号，单引号双引号自动变换，分级展示，控制展开和叠起。觉得功能不全的你还可以继续添加。样式觉得丑的，你可以自己定义css样式。
然后让我们看一下市面上常用的比较成熟的json格式化工具，做下对比。下边这个是google浏览器的插件JSON Edit。
嗯，对比结束，我写的比他的好，嗯，是这样，没毛病。
废话少说，上代码：
总共三部分：html、css和js，组合在一起就能用，不过百行代码。如果你嫌麻烦，在文章底部我有一个做好了的打成压缩包分享在github了，链接已有，自己下。
结构如下
html代码：
<!DOCTYPE html>
<html >
<head>
<title>原生json格式化及高亮</title>
<meta name=”description” content=”json,格式化,高亮”>
<meta name=”keywords” content=”json,格式化,高亮”>
<script src=”http://www.toutiao.com/a6353464929467973889/c.js” type=”text/javascript”></script>
<link href=”http://www.toutiao.com/a6353464929467973889/s.css” type=”text/css” rel=”stylesheet”></link>
</head>
<body>
<div class=”HeadersRow”>
<div id=”HeaderTitle”>
<h3 id=”HeaderSubTitle”>JSON格式化及高亮:</h3>
<textarea id=”RawJson”>
</textarea>
</div>
<div id=”ControlsRow”>
<input type=”Button” value=”格式化” onclick=”Process()”/>
<span id=”TabSizeHolder”>
缩进量
<select id=”TabSize” onchange=”TabSizeChanged()”>
<option value=”1″>1</option>
<option value=”2″ selected=”true”>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
</select>
</span>
<label for=”QuoteKeys”>
<input type=”checkbox” id=”QuoteKeys” onclick=”QuoteKeysClicked()” checked=”true” />
引号
</label>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”SelectAllClicked()”>全选</a>
<span id=”CollapsibleViewHolder” >
<label for=”CollapsibleView”>
<input type=”checkbox” id=”CollapsibleView” onclick=”CollapsibleViewClicked()” checked=”true” />
显示控制
</label>
</span>
<span id=”CollapsibleViewDetail”>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”ExpandAllClicked()”>展开</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseAllClicked()”>叠起</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseLevel(3)”>2级</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseLevel(4)”>3级</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseLevel(5)”>4级</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseLevel(6)”>5级</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseLevel(7)”>6级</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseLevel(8)”>7级</a>
<a href=”http://www.toutiao.com/a6353464929467973889/javascript:void(0);” onclick=”CollapseLevel(9)”>8级</a>
</span>
</div>
<div id=”Canvas” class=”Canvas”></div>
<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”http://www.toutiao.com/a6353464929467973889/m.js”></script>
</body>
</html>
css代码：
css代码是控制样式的，无操作逻辑，你可以换成你自己喜欢的风格，这里不大费篇章的介绍，简单截图带过。看源码的可以下我的分享的压缩包。
js代码：
直接上github链接，我已经上传压缩包，解压可用，源码也可以查看，自己下载看吧。
https://git.oschina.net/lovepeng/share-for-you.git
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/29750.html
