json文件编译器(json文件的使用和相应编程语言相关)

发布时间:2023-12-08

json文件编译器(json文件的使用和相应编程语言相关)

更新:2022-11-15 03:34

本文目录一览:

  1. 求JSON Viewer编辑器免安装版下载
  2. json精灵编辑器载入失败
  3. json 是什么文件
  4. react--实现简易json编辑器

求JSON Viewer编辑器免安装版下载

软件介绍: JSON Viewer是一款非常实用的Json格式查看器。在日常开发调试中我们难免会遇到Json格式的数据需要解析阅读,但Json格式数据阅读性极差。 所需工具: 点击下载 JSON Viewer编辑器

json view chrome插件

  1. 将下载好的插件进行安装,打开chrome - 扩展程序 (地址栏输入 chrome://extensions/);
  2. 在chrome浏览器右上角工具栏中选中“开发模式”功能选项;
  3. 点击"加载正在开发的扩展程序..." - 选择插件目录(例如:D:\Download\JSONView-for-Chrome-master\WebContent);
  4. 安装完成,重新加载(快捷键 Ctrl+R)。

json精灵编辑器载入失败

json精灵编辑器载入失败通常是由于文件损坏。解决方法是删除当前的json精灵编辑器,重新下载安装即可。 .json是一种轻量级的数据交换格式,在与后端的数据交互中具有较为广泛的应用。

json 是什么文件

JSON的全称是“JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本、独立于语言的轻量级数据交换格式。 XML也是一种数据交换格式,但为什么没有选择XML呢?因为XML虽然可以作为跨平台的数据交换格式,但是在JS(JavaScript的简写)中处理XML非常不方便,同时XML标记比数据多,增加了交换产生的流量,而JSON没有附加的任何标记,在JS中可作为对象处理,所以我们更倾向于选择JSON来交换数据。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成(网络传输速率)。JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。 JSON可以使用专门的编译器打开。JSON有两种表示结构,对象和数组。对象结构以{大括号开始,以}大括号结束。中间部分由0或多个以,分隔的key(关键字)/value(值)对构成,关键字和值之间以:分隔。

react--实现简易json编辑器

分析

由于个人不太喜欢一切皆props的形式,故想要做到一些公共API既可以在内部调用又可以对外暴露。类组件使用高阶/装饰器,函数组件使用hooks,我这里使用方式二,对外提供useEditor

json预览

  • 通过原生标签的contentEditable属性可以实现在线json编辑;
  • 通过pre标签并利用JSON.stringify的参数3实现格式化预览;
  • 通过监听input事件实现编辑监听。

树形编辑

  • 借用antd的tree组件快速实现树形UI展示;
  • 将json字符串处理成treeData展示到tree组件,操作后在转成json反显到左侧预览区;
  • 删除编辑能力通过将treeData这颗多叉树转为二叉树操作后再回退到多叉树进行回显。

创建react项目

create-react-app json-edit --template typescript

实现

  • index作为入口文件,应当承载着所有内部接口对外暴露的能力;
  • 这里将json和editor组件以及useEditor暴露出去;
  • json组件用于展示并编辑json字符串;
    • 使用contentEditable开启编辑,利用pre + JSON.stringify({}, null, ' ')进行格式化,通过input事件监听json修改;
  • tree组件用于展示,并允许弹窗的形式删除或修改节点;
    • 首先是json字符串转为多叉树后展示;
    • 当存在节点编辑后,需要从节点删除或编辑,可以先将多叉树转成二叉树进行操作,后再转回多叉树,之前实现过,就不重复写了;
    • 最后就是将编辑后的多叉树再转回json字符串。

效果如下

待优化的点

  • 预览时无法实时进行格式化处理,这是因为格式化操作光标位置会重置,需要不断进行记录并在格式化后重新设置;
  • 编辑操作目前仅支持编辑最后一级节点;
  • 删除操作会导致原json数据的顺序被修改,这主要是在生成的id值不正确,导致在二叉转多叉时排序不准。