前端:从零封装一个可实时预览的Json编辑器

发布日期:2022-08-07 06:58    点击次数:153
绿树成荫

做为一名前端开发人员,独霸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编辑器组件.

实现预览和编辑视图

着实这一点很好实现,我们只需要实例化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 

这样,我们便能实现一个开真个可实时预览的编辑器.可以或许结果长这样:

激情亲切于童稚版,然则另有良多细节要处理惩罚. 对表面露属性和编制以支持差别场景的需要
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 

经由过程以上的进程,我们已经实现一大半事变了,剩下的细节和优化事变,比喻组件卸载时怎么样卸载实例, 对组件举行范例检测等,我们延续实现以上成就.

应用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库截图以下:

好啦, 来日诰日的分享就到这啦!

本文转载自微信群众号「趣谈前端」