让建站和SEO变得简单

让不懂建站的用户快速建站,让会建站的提高建站效率!

乐彩客购彩官网

前端:从零封装一个可及时预览的Json裁剪器

发布日期:2022-03-13 19:40    点击次数:150
绿树成荫

做为又名前端开拓人员,控制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库截图如下:

好啦, 今天的共享就到这啦!

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

 








    Powered by 乐彩客购彩 @2013-2022 RSS地图 HTML地图

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