前端:从零封装一个可实时预览的Json编辑器
      发布时间:2022-01-13 13:11      作者:admin      点击:

绿树成荫

做为别名前端开发人员,掌握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库截图如下:

益啦, 今天的分享就到这啦!

本文转载自微信公多号「趣谈前端」

【编辑选举】

鸿蒙官方战略配相符共建——HarmonyOS技术社区 Kubernetes容器平台架构解读 支付宝 App 集五福版发布:福相伴,五福,马上到! Windows 11 22526新版修复大量题目!新特性抢先望 WiFi7有多强?比WiFi6高三倍,速度快如飞 Python再获年度编程说话,微柔或成最大赢家
 
 

Powered by 轮理片在人线2021-老扒让儿媳欲仙欲死手机官网-四个男人搞 @2018 RSS地图 HTML地图

Copyright 站群系统 © 2013-2021 365建站器 版权所有