- 当前位置：首页 >数据库 >前端进阶:二次封装一个可实时预览的json编辑器
前端进阶:二次封装一个可实时预览的json编辑器
发布时间：2025-11-02 20:21:00 来源：云智核 作者：数据库
绿树成荫
做为一名前端开发人员,前端器掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor这个第三方库,官方地址: jsoneditor 通过实现一个json在线编辑器,来学习如何一步步封装自己的组件(不限于react,vue,原理类似).
你将学到:
react组件封装的基本思路 SOLID (面向对象设计)原则介绍 jsoneditor用法 使用PropTypes做组件类型检查设计思路
在介绍组件设计思路之前,有必要介绍一下著名的SOLID原则.
SOLID(单一功能、开闭原则、进阶里氏替换、次封接口隔离以及依赖反转)是可实由罗伯特·C·马丁提出的面向对象编程和面向对象设计的五个基本原则。利用这些原则，时预程序员能更容易和高效的编辑开发一个可维护和扩展的系统。SOLID被典型的前端器应用在测试驱动开发上，并且是进阶敏捷开发以及自适应软件开发的基本原则的重要组成部分。
S 单一功能原则: 规定每个类都应该有一个单一的次封功能，并且该功能应该由这个类完全封装起来。可实所有它的时预服务都应该严密的和该功能保持一致。 O 开闭原则: 规定“软件中的编辑对象(类，模块，前端器函数等等)应该对于扩展是进阶开放的亿华云计算，但是次封对于修改是封闭的”，这意味着一个实体是允许在不改变它的源代码的前提下变更它的行为。遵循这种原则的代码在扩展时并不需要改变。 L 里氏替换原则: 派生类(子类)对象可以在程序中代替其基类(超类)对象,是对子类型的特别定义. I 接口隔离原则: 指明应用或者对象应该不依赖于它不使用的方法。接口隔离原则(ISP)拆分非常庞大臃肿的接口成为更小的和更具体的接口，这样应用或对象只需要知道它们感兴趣的方法。这种缩小的接口也被称为角色接口。接口隔离原则(ISP)的目的是系统去耦合，从而容易重构，更改和重新部署。接口隔离原则是在SOLID (面向对象设计)中五个面向对象设计(OOD)的原则之一，云服务器类似于在GRASP (面向对象设计)中的高内聚性。 D 依赖反转原则: 是指一种特定的解耦 形式，使得高层次的模块不依赖于低层次的模块的实现细节，依赖关系被颠倒(反转)，从而使得低层次模块依赖于高层次模块的需求抽象。掌握好这5个原则将有利于我们开发出更优秀的组件,请默默记住.接下来我们来看看json编辑器的设计思路.
如上所示, 和任何一个输入框一样, 参考antd组件设计方式并兼容antd的form表单, 我们提供了onChange方法.(具体细节下文会详细介绍)
首先利用jsoneditor渲染的基本样式以及API,我们能实现一个基本可用的json编辑器,然后通过对外暴露的json和onChange属性进行数据双向绑定, 通过onError来监控异常或者输入的错误, 通过themeBgColor来修改默认的主题色,通过这几个接口,我们便能完全掌握一个组件的运行情况.
正文
接下来我们就正式开始我们的正文.由于本文的组件是基于react实现的,但是用在vue,angular上,基本模式同样适用.关键就是掌握好不同框架的生命周期.
在学习实现json编辑器组件之前,我们有必要了解一下jsoneditor这个第三方组件的用法与api.
jsoneditor的使用
安装
我们先执行npm install安装我们的组件
npm install jsoneditor其次手动引入样式文件
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">这样,我们就能使用它的api了:
<div id="jsoneditor" style="width: 400px; height: 400px;"></div> <script> // 创建编辑器 var container = document.getElementById("jsoneditor"); var editor = new JSONEditor(container); // 设置json数据 function setJSON () { var json = { "Array": [1, 2, 3], "Boolean": true, "Null": null, "Number": 123, "Object": {"a": "b", "c": "d"}, "String": "Hello World" }; editor.set(json); } // 获取json数据 function getJSON() { var json = editor.get(); alert(JSON.stringify(json, null, 2)); } </script>所以你可能看到如下界面:
为了能实现实时预览和编辑,光这样还远远不够,我们还需要进行额外的云服务器提供商处理.我们需要用到jsoneditor其他的api和技巧.
结合react进行二次封装
基于以上谈论,我们很容易将编辑器封装成react组件, 我们只需要在componentDidMount生命周期里初始化实例即可.react代码可能是这样的:
import React, { PureComponent } from react import JSONEditor from jsoneditor import jsoneditor/dist/jsoneditor.css class JsonEditor extends PureComponent { initJsonEditor = () => { const options = { mode: code, history: true, onChange: this.onChange, onValidationError: this.onError }; this.jsoneditor = new JSONEditor(this.container, options) this.jsoneditor.set(this.props.value) } componentDidMount () { this.initJsonEditor() } componentWillUnmount () { if (this.jsoneditor) { this.jsoneditor.destroy() } } render() { return <div className="jsoneditor-react-container" ref={elem => this.container = elem} /> } } export default JsonEditor至于options里的选项, 我们可以参考jsoneditor的API文档,里面写的很详细, 通过以上代码,我们便可以实现一个基本的react版的json编辑器组件.接下来我们来按照设计思路一步步实现可实时预览的json编辑器组件.
1.实现预览和编辑视图
其实这一点很好实现,我们只需要实例化2个编辑器实例,一个用于预览,一个用于编辑就好了.
import React, { PureComponent } from react import JSONEditor from jsoneditor import jsoneditor/dist/jsoneditor.css class JsonEditor extends PureComponent { onChange = () => { let value = this.jsoneditor.get() this.viewJsoneditor.set(value) } initJsonEditor = () => { const options = { mode: code, history: true }; this.jsoneditor = new JSONEditor(this.container, options) this.jsoneditor.set(this.props.value) } initViewJsonEditor = () => { const options = { mode: view }; this.viewJsoneditor = new JSONEditor(this.viewContainer, options) this.viewJsoneditor.set(this.props.value) } componentDidMount () { this.initJsonEditor() this.initViewJsonEditor() } componentDidUpdate() { if(this.jsoneditor) { this.jsoneditor.update(this.props.value) this.viewJsoneditor.update(this.props.value) } } render() { return ( <div className="jsonEditWrap"> <div className="jsoneditor-react-container" ref={elem => this.container = elem} /> <div className="jsoneditor-react-container" ref={elem => this.viewContainer = elem} /> </div> ); } } export default JsonEditor这样,我们便能实现一个初步的可实时预览的编辑器.可能效果长这样:
接近于成熟版,但是还有很多细节要处理.
2.对外暴露属性和方法以支持不同场景的需要
import React, { PureComponent } from react import JSONEditor from jsoneditor import jsoneditor/dist/jsoneditor.css class JsonEditor extends PureComponent { // 监听输入值的变化 onChange = () => { let value = this.jsoneditor.get() this.props.onChange && this.props.onChange(value) this.viewJsoneditor.set(value) } // 对外暴露获取编辑器的json数据 getJson = () => { this.props.getJson && this.props.getJson(this.jsoneditor.get()) } // 对外提交错误信息 onError = (errArr) => { this.props.onError && this.props.onError(errArr) } initJsonEditor = () => { const options = { mode: code, history: true, onChange: this.onChange, onValidationError: this.onError }; this.jsoneditor = new JSONEditor(this.container, options) this.jsoneditor.set(this.props.value) } initViewJsonEditor = () => { const options = { mode: view }; this.viewJsoneditor = new JSONEditor(this.viewContainer, options) this.viewJsoneditor.set(this.props.value) } componentDidMount () { this.initJsonEditor() this.initViewJsonEditor() // 设置主题色 this.container.querySelector(.jsoneditor-menu).style.backgroundColor = this.props.themeBgColor this.container.querySelector(.jsoneditor).style.border = `thin solid ${this.props.themeBgColor}` this.viewContainer.querySelector(.jsoneditor-menu).style.backgroundColor = this.props.themeBgColor this.viewContainer.querySelector(.jsoneditor).style.border = `thin solid ${this.props.themeBgColor}` } componentDidUpdate() { if(this.jsoneditor) { this.jsoneditor.update(this.props.json) this.viewJsoneditor.update(this.props.json) } } render() { return ( <div className="jsonEditWrap"> <div className="jsoneditor-react-container" ref={elem => this.container = elem} /> <div className="jsoneditor-react-container" ref={elem => this.viewContainer = elem} /> </div> ); } } export default JsonEditor通过以上的过程,我们已经完成一大半工作了,剩下的细节和优化工作,比如组件卸载时如何卸载实例, 对组件进行类型检测等,我们继续完成以上问题.
3.使用PropTypes进行类型检测以及在组件卸载时清除实例
类型检测时react内部支持的,安装react的时候会自动帮我们安装PropTypes,具体用法可参考官网地址propTypes文档,其次我们会在react的componentWillUnmount生命周期中清除编辑器的实例以释放内存.完整代码如下:
import React, { PureComponent } from react import JSONEditor from jsoneditor import PropTypes from prop-types import jsoneditor/dist/jsoneditor.css /** * JsonEditor * @param {object} json 用于绑定的json数据 * @param {func} onChange 变化时的回调 * @param {func} getJson 为外部提供回去json的方法 * @param {func} onError 为外部提供json格式错误的回调 * @param {string} themeBgColor 为外部暴露修改主题色 */ class JsonEditor extends PureComponent { onChange = () => { let value = this.jsoneditor.get() this.props.onChange && this.props.onChange(value) this.viewJsoneditor.set(value) } getJson = () => { this.props.getJson && this.props.getJson(this.jsoneditor.get()) } onError = (errArr) => { this.props.onError && this.props.onError(errArr) } initJsonEditor = () => { const options = { mode: code, history: true, onChange: this.onChange, onValidationError: this.onError }; this.jsoneditor = new JSONEditor(this.container, options) this.jsoneditor.set(this.props.value) } initViewJsonEditor = () => { const options = { mode: view }; this.viewJsoneditor = new JSONEditor(this.viewContainer, options) this.viewJsoneditor.set(this.props.value) } componentDidMount () { this.initJsonEditor() this.initViewJsonEditor() // 设置主题色 this.container.querySelector(.jsoneditor-menu).style.backgroundColor = this.props.themeBgColor this.container.querySelector(.jsoneditor).style.border = `thin solid ${this.props.themeBgColor}` this.viewContainer.querySelector(.jsoneditor-menu).style.backgroundColor = this.props.themeBgColor this.viewContainer.querySelector(.jsoneditor).style.border = `thin solid ${this.props.themeBgColor}` } componentWillUnmount () { if (this.jsoneditor) { this.jsoneditor.destroy() this.viewJsoneditor.destroy() } } componentDidUpdate() { if(this.jsoneditor) { this.jsoneditor.update(this.props.json) this.viewJsoneditor.update(this.props.json) } } render() { return ( <div className="jsonEditWrap"> <div className="jsoneditor-react-container" ref={elem => this.container = elem} /> <div className="jsoneditor-react-container" ref={elem => this.viewContainer = elem} /> </div> ); } } JsonEditor.propTypes = { json: PropTypes.object, onChange: PropTypes.func, getJson: PropTypes.func, onError: PropTypes.func, themeBgColor: PropTypes.string } export default JsonEditor由于组件严格遵守开闭原则,所以我们可以提供更加定制的功能在我们的json编辑器中,已实现不同项目的需求.对于组件开发的健壮性探讨,除了使用propTypes外还可以基于typescript开发,这样适合团队开发组件库或者复杂项目组件的追溯和查错.最终效果如下:
笔者已经将实现过的组件发布到npm上了,大家如果感兴趣可以直接用npm安装后使用,方式如下:
npm i @alex_xu/xui // 导入xui import { Button, Skeleton, Empty, Progress, Tag, Switch, Drawer, Badge, Alert } from @alex_xu/xui该组件库支持按需导入,我们只需要在项目里配置babel-plugin-import即可,具体配置如下:
// .babelrc "plugins": [ ["import", { "libraryName": "@alex_xu/xui", "style": true }] ]npm库截图如下:
最后
本文转自《趣谈前端》如需转载请联系作者授权。
- 电脑机箱前置音频升级教程（轻松解决前置音频问题，提升音质体验）
- 猩猩安卓模拟器（一键畅玩安卓应用，全面满足用户需求）
- 拙石M8手机评测——性能卓越，超越期待（拙石M8手机性能测试报告及用户体验分享）
- 免费影视投屏软件推荐（方便快捷的免费影视投屏解决方案）
- 性价比较高的笔记本电脑品牌推荐（挑选高性能低价位笔记本电脑品牌，以品质为保证的1个）
- AcerSwift3（一部性能出色、便携轻薄的笔记本电脑）
- 索尼HT-CT80（揭秘索尼HT-CT80的卓越音效技术与便捷操作功能）
- 移动大王卡信号稳定性分析（通过测试和用户反馈评估移动大王卡的信号质量）
- 电脑关机提示端口错误的原因及解决方法（探究电脑关机时显示端口错误的常见原因和解决办法）
- 大白菜win10安装教程（详细步骤带你一步步操作，让安装变得简单易行）
- 电脑手绘装修柜子教程（学习如何使用电脑手绘技巧来装修你的柜子，让家居更加个性化）
- 《掌握饥荒联机版控制台指令，畅享无尽游戏乐趣》（精通饥荒联机版控制台指令，让游戏世界任你驰骋）
- 中兴天机S3的性能和功能如何？（探索中兴天机S3的创新科技与用户体验）
- 探秘深海塞尔话筒（打破水下录音的局限，深海塞尔话筒为您带来无限可能）
- 华为电脑MateBookXPro使用教程（轻松掌握华为MateBookXPro的使用技巧与窍门）
- 如何正确地设置无线路由器？（简单步骤帮助您成功设置无线路由器）
- 探索以爱赛因斯怎么样（以爱赛因斯的艺术世界和对社会的影响力）
- 国内外知名电饭煲品牌大对比（五大电饭煲品牌的性能、设计与价格对比）
- 电脑连接翼讯后发生错误的解决方法（翼讯连接错误、网络问题、解决方案）
- XP系统光碟安装教程（详细步骤图文指导，让你轻松安装XP系统）
随便看看
香港云服务器源码下载企商汇IT技术网服务器租用源码库益华科技亿华云IT资讯网益华科技益强数据堂益强智囊团亿华智造智能时代益强科技亿华灵动益强编程堂亿华智慧云亿华互联技术快报益强编程舍IT资讯网益华科技汇智坊亿华云码力社科技前瞻编程之道益华IT技术论坛益强智未来极客码头亿华云计算亿华科技云站无忧多维IT资讯运维纵横云智核益强IT技术网益强资讯优选创站工坊益强科技益强前沿资讯思维库极客编程
- Copyright © 2025 Powered by 前端进阶:二次封装一个可实时预览的json编辑器,云智核 滇ICP备2023006006号-28sitemap