一、背景

先说痛点：日常开发中，经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面进行校验、查看和对比等操作，但是现在主流的在线JSON格式化网站都只支持单个操作，如果想同时查看多条JSON，那么就得开多个浏览器标签页，效率非常低下。比如这样

想看另一条JSON必须切换标签页，重复的操作一两次还可以，久而久之就无法忍受了。如果能把这些JSON都在一个页面上格式化就好了。

二、尝试解决

一个页面格式化多条JSON，那就是从本来的一个操作区域变成多个操作区域。首先想到的是拷贝下别人的代码，初始化对象的时候多初始化几个，这样就一个变多个了。于是找到国内某搜索排名靠前的JSON格式化网站来研究。看看他们的js

看了后非常疑惑，js为什么要写成这样？这个_0x6eb0对象里的元素为什么都转成了16进制的，刚开始还想着挨个转回来看看到底是什么，突然想到Chrome已经拿到了这个对象，打印一下就可以了

到这里才明白了，就是不让你舒服的看源码。不过这个js还好，想拿来用的话恢复和修改的难度不大，看看另一个js

1万多行混淆的代码，变量名都替换成了短的，想看某个变量怎么定义的、方法在哪里调用过，搜索都没办法搜索，基本放弃了。

三、拨云见日

既然国内的JSON格式化网站没法抄了，就到国外找找，Google上搜索JSON Formatter，前几个网站界面都不一样，但是用的都是JSONEditor这个编辑器。JSONEditor的简介是："A web-based tool to view, edit, format, and validate JSON"，看来能满足需求了，看下这个编辑器的效果图

看下对应的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <title>test page</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link rel="stylesheet" type="text/css" href="dist/jsoneditor.min.css">

    <script type="text/javascript" src="dist/jsoneditor.min.js"></script>

    <style type="text/css">

        #container {

            width: 500px;

            height: 600px;

        }

    </style>

</head>

<body>

    <div id="container"></div>

    <script type="text/javascript">

        var container = document.getElementById('container');

        var options = {

            mode: 'code',

            onError: function (err) {

                alert(err.toString());

            }

        };

        var editor = new JSONEditor(container, options);

    </script>

</body>

</html>

非常简洁，这个editor还自带json格式化、压缩和去除转义的功能，无需自己实现。为了方便布局，用下Bootstrap的栅栏模式，看看多个editor放在一起的效果

对应的代码是

<!DOCTYPE html>

<html lang="en">

<head>

    <title>test page</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link rel="stylesheet" type="text/css" href="dist/jsoneditor.min.css">

    <link rel="stylesheet" type="text/css" href="dist/bootstrap.min.css">

    <script type="text/javascript" src="dist/jquery.min.js"></script>

    <script type="text/javascript" src="dist/jsoneditor.min.js"></script>

    <script type="text/javascript" src="dist/bootstrap.min.js"></script>

</head>

<body>

    <div class="container-fluid">

        <div class="row">

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

                <div id="container1"></div>

            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

                <div id="container2"></div>

            </div>

        </div>

    </div>

    <script type="text/javascript">

        var container1 = document.getElementById('container1');

        var container2 = document.getElementById('container2');

        var options = {

            mode: 'code',

            onError: function (err) {

                alert(err.toString());

            }

        };

        var editor1 = new JSONEditor(container1, options);

        var editor2 = new JSONEditor(container2, options);

        var wHeight = $(window).height();

        $("#container1,#container2").height(wHeight);

    </script>

</body>

</html>

到这里又该疑惑了：一个页面到底放几个editor合适。最终决定根据浏览器窗口宽度动态控制个数

function getMaxBoxCount() {

    var screenWidth = $(window).width();

    var maxBoxCount = 0;

    if (screenWidth < 1024) {

        maxBoxCount = 1;

    }

    else if (screenWidth >= 1024 && screenWidth < 1920) {//1080p

        maxBoxCount = 2;

    }

    else if (screenWidth >= 1920 && screenWidth < 2560) {//2k

        maxBoxCount = 3;

    }

    else if (screenWidth >= 2560 && screenWidth < 3840) {//4k

        maxBoxCount = 4;

    }

    else if (screenWidth >= 3840 && screenWidth < 5120) {//5k

        maxBoxCount = 5;

    }

    else if (screenWidth >= 5120) {//5k+

        maxBoxCount = 6;

    }

    return maxBoxCount;

}

如果用户的显示器是5k的，那么放6个editor，一个页面同时显示6段JSON，基本够用了。如果不够再开一个标签页，就是12个了。
当然也不强制必须开几个，允许关掉editor为剩下的editor获取更大的显示宽度。这里需要注意的就是：单页应用不停的关闭和增加editor对象必须要考虑销毁，否则越来越卡。JSONEditor提供了JSONEditor.destroy()方法，文档里是这样描述destroy方法的："Destroy the editor. Clean up DOM, event listeners, and web workers."。

调用destroy方法之前必须得有editor对象，所以初始化的时候就给存起来

var jsonEditorArr = [];

var cnr = $("[data-tgt='container']");

$.each(cnr, function (i, v) {

    editor = new JSONEditor(v, jsonEditorOptions);

    jsonEditorArr.push(editor);

});

之后每次删除和增加editor都必须维护这个jsonEditorArr数组

var idx = $(this).parents(".mainBox").next().index();

jsonEditorArr.splice(idx, 0, editor);//增加

jsonEditorArr[idx].destroy();

jsonEditorArr.splice(idx, 1);//移除

至此功能就差不多了，继续为这个插件加一些常用功能

1.复制

复制editor里的JSON到剪切板，再去别的地方粘贴出来结构不乱。使用的是clipboard-polyfill这个库，不需要初始化和销毁对象等操作，直接调用api无脑copy即可，省事省心。示例代码

clipboard.writeText(jsonCopy).then(function () {

    console.log('ok');

}, function (err) {

    console.log(err);

});

2.粘贴

别的地方复制的JSON，到这里不需要右键然后粘贴了，直接点粘贴按钮即可，每次操作省一次鼠标右击。同样借助了clipboard-polyfill这个库。示例代码

clipboard.readText().then(function (result) {

    console.log('剪切板里的内容是：'+result);

}, function (err) {

    console.log(err);

});

3.下载

保存JSON到本地，省的复制全部，然后到本地新建txt粘贴保存了。使用了FileSaver.js，示例代码

var blob = new Blob([jsonData], { type: "text/plain;charset=utf-8" });

saveAs(blob, "jsonviewer.txt");

至此，功能就都完成了，来看看最终的效果图

四、感谢

用到了如上库，感谢无私分享

五、源码

GitHub：https://github.com/oppoic/JSONViewer

Gitee：https://gitee.com/oppoic/JSONViewer

六、总结

本文地址：https://www.cnblogs.com/oppoic/p/10444012.html，如果觉得不错，请不吝点个赞并到Github和Gitee上Star本项目，谢谢！

开发谷歌浏览器插件会上瘾，搞了一个JSONViewer，一个页面格式化多条JSON，提升工作效率的更多相关文章

推荐几个Mac插件帮你提升工作效率
下面这篇文章是小编看到的很好的文章,分享给大家,小编前几天也整理了很多mac专题文章.更多专题,可关注[磨人的小妖精],查看我的文章,也可上[风云社区 SCOEE],查找和下载相关软件资源. (一)综 ...
android studio插件提升工作效率
SonarLint 代码质量管理插件 ButterKnife Zelezny ButterKnife 生成器,快速根据布局文件生成属性对象. SelectorChapek 设计师给我们提供好了各种资源 ...
php 如何造一个简短原始的数据库类用来增加工作效率
class DBDA{ public $host="localhost"; public $uid="root"; public $pwd="123& ...
云开发 VSCode 插件 Cloudbase Toolkit 的正确打开方式
什么是 Cloudbase Toolkit Tencent CloudBase Toolkit 是云开发的 VS Code(Visual Studio Code)插件.该插件可以让您更好地在本地进行云 ...
介绍一款chrom浏览器插件 DHC是一款使用chrome模拟REST客户端向服务器发送测试数据的谷歌浏览器插件
先打个小广告哈公司招java架构师,月薪25K以上,负责电商平台架构工作,工作地点在北京 1号线永安里站附近,如有意向请把简历发我邮箱jia6235@163.com 可以内部推荐. DHC是一款 ...
VisualStudio 2013开发Office插件
在VS中选择创建新项目,选择App for Office 选择mail出现的位置 Task pane The app appears in the task pane of a Microsift O ...
常用的HTTP测试工具谷歌浏览器插件汇总
网页的开发和测试时最常见的测试就是HTTP测试,作为曾经的测试人员在这方面还是略知一二的.其实做网页测试工作是非常繁琐的时期,有时候甚至是无聊重复的,如果没有网页测试工具的帮助的话,测试人员会越做越怀 ...
教你开发jQuery插件（转）
教你开发jQuery插件(转) 阅读目录基本方法支持链式调用让插件接收参数面向对象的插件开发关于命名空间关于变量定义及命名压缩的好处工具 GitHub Service Hook 原文: ...
自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...

随机推荐

SQL给数据编号
方法:ROW_NUMBER() over(order by getdate()) AS num 使用案例 : select * From (select ROW_NUMBER() over(orde ...
Activiti工作流数据库表详细介绍
Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. ACT_RE_*: 'RE'表示repository. 这个前缀 ...
Linux系统安装 OpenSSL两种方法
OpenSSL是一个开源的ssl技术,由于安装pytbull,需要安装openssl,并下载对应的版本下载地址:https://www.openssl.org/source/ 方法一,编译安装Open ...
解决weblogic 部署环境后出现的乱码问题
1.在startWebloci.cmd 中 set CLASSPATH=%SAVE_CLASSPATH% 下增加一行 JAVA_OPTIONS="${JAVA_OPTIONS} -Dfile ...
Flutter介绍 - Flutter,H5,React Native之间的对比
Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...
ZJOI2019二试游记
ZJOI2019二试游记 Day -2 今天就要去被虐了!开一篇占个坑.禁赛警告 Day -1 早上zzy,下午zzq,无限懵逼... 过来的时候Sooke,memset0,老K坐我旁边,瑟瑟发抖.. ...
谷歌浏览器隐藏url前缀问题
此前曾有用户表示,谷歌若在Chrome的地址栏中隐藏URL的HTTP.HTTPS及WWW前缀,那么用户的安全将有可能遭至威胁,如果你不希望Chrome浏览器隐藏URL的HTTP.HTTPS及WWW前 ...
解决Java中There is no getter for property XXX'XXX' in 'class XXX'的问题
当你出现There is no getter for property XXX'XXX' in 'class XXX'时, 就是在你的这个类中没有找到你这个属性. 检查两个地方 1.你的返回值类型是否 ...
java 实现一个beautiful的弹层和具体功能
先看一下弹层的效果: 点击确定跳转百度页面,点击取消弹层消失. 我这个弹层是在layui找的, 1. 需要layui.css文件和layui.js文件 (想我这样笨的人,没有同学的告知,我都不知道去哪 ...
Mac eos 环境搭建
最近EOS官网出了文档,说可以跑通一个独立测试的节点了.这周尝试自行搭建了一下,由于自己不完全做mac下的开发,且这玩意是C写的,所以make起来遇到不少坑,记录下来.附完整踩坑.填坑记录. 1. 搭 ...

开发谷歌浏览器插件会上瘾，搞了一个JSONViewer，一个页面格式化多条JSON，提升工作效率