jsoneditor二次封裝實(shí)時(shí)預(yù)覽json編輯器組件react版
前言
做為一名前端開發(fā)人員,掌握vue/react/angular等框架已經(jīng)是必不可少的技能了,我們都知道,vue或react等MVVM框架提倡組件化開發(fā),這樣一方面可以提高組件復(fù)用性和可擴(kuò)展性,另一方面也帶來(lái)了項(xiàng)目開發(fā)的靈活性和可維護(hù),方便多人開發(fā)協(xié)作.接下來(lái)文章將介紹如何使用react,開發(fā)一個(gè)自定義json編輯器組件.我們這里使用了jsoneditor這個(gè)第三方庫(kù),官方地址: jsoneditor 通過(guò)實(shí)現(xiàn)一個(gè)json在線編輯器,來(lái)學(xué)習(xí)如何一步步封裝自己的組件(不限于react,vue,原理類似).
你將學(xué)到:
- react組件封裝的基本思路
- SOLID (面向?qū)ο笤O(shè)計(jì))原則介紹
- jsoneditor用法
- 使用PropTypes做組件類型檢查
設(shè)計(jì)思路
在介紹組件設(shè)計(jì)思路之前,有必要介紹一下著名的SOLID原則.
SOLID（單一功能、開閉原則、里氏替換、接口隔離以及依賴反轉(zhuǎn)）是由羅伯特·C·馬丁提出的面向?qū)ο缶幊毯兔嫦驅(qū)ο笤O(shè)計(jì)的五個(gè)基本原則。利用這些原則，程序員能更容易和高效的開發(fā)一個(gè)可維護(hù)和擴(kuò)展的系統(tǒng)。 SOLID被典型的應(yīng)用在測(cè)試驅(qū)動(dòng)開發(fā)上，并且是敏捷開發(fā)以及自適應(yīng)軟件開發(fā)的基本原則的重要組成部分。
- S 單一功能原則: 規(guī)定每個(gè)類都應(yīng)該有一個(gè)單一的功能，并且該功能應(yīng)該由這個(gè)類完全封裝起來(lái)。所有它的服務(wù)都應(yīng)該嚴(yán)密的和該功能保持一致。
- O 開閉原則: 規(guī)定“軟件中的對(duì)象（類，模塊，函數(shù)等等）應(yīng)該對(duì)于擴(kuò)展是開放的，但是對(duì)于修改是封閉的”，這意味著一個(gè)實(shí)體是允許在不改變它的源代碼的前提下變更它的行為。遵循這種原則的代碼在擴(kuò)展時(shí)并不需要改變。
- L 里氏替換原則: 派生類（子類）對(duì)象可以在程序中代替其基類（超類）對(duì)象,是對(duì)子類型的特別定義.
- I 接口隔離原則: 指明應(yīng)用或者對(duì)象應(yīng)該不依賴于它不使用的方法。接口隔離原則(ISP)拆分非常龐大臃腫的接口成為更小的和更具體的接口，這樣應(yīng)用或?qū)ο笾恍枰浪鼈兏信d趣的方法。這種縮小的接口也被稱為角色接口。接口隔離原則(ISP)的目的是系統(tǒng)去耦合，從而容易重構(gòu)，更改和重新部署。接口隔離原則是在SOLID (面向?qū)ο笤O(shè)計(jì))中五個(gè)面向?qū)ο笤O(shè)計(jì)(OOD)的原則之一，類似于在GRASP (面向?qū)ο笤O(shè)計(jì))中的高內(nèi)聚性。
- D 依賴反轉(zhuǎn)原則: 是指一種特定的解耦 形式，使得高層次的模塊不依賴于低層次的模塊的實(shí)現(xiàn)細(xì)節(jié)，依賴關(guān)系被顛倒（反轉(zhuǎn)），從而使得低層次模塊依賴于高層次模塊的需求抽象。
掌握好這5個(gè)原則將有利于我們開發(fā)出更優(yōu)秀的組件,請(qǐng)默默記住.接下來(lái)我們來(lái)看看json編輯器的設(shè)計(jì)思路.
如上所示, 和任何一個(gè)輸入框一樣, 參考antd組件設(shè)計(jì)方式并兼容antd的form表單, 我們提供了onChange方法.(具體細(xì)節(jié)下文會(huì)詳細(xì)介紹)
首先利用jsoneditor渲染的基本樣式以及API,我們能實(shí)現(xiàn)一個(gè)基本可用的json編輯器,然后通過(guò)對(duì)外暴露的json和onChange屬性進(jìn)行數(shù)據(jù)雙向綁定, 通過(guò)onError來(lái)監(jiān)控異?；蛘咻斎氲腻e(cuò)誤, 通過(guò)themeBgColor來(lái)修改默認(rèn)的主題色,通過(guò)這幾個(gè)接口,我們便能完全掌握一個(gè)組件的運(yùn)行情況.
正文
接下來(lái)我們就正式開始我們的正文.由于本文的組件是基于react實(shí)現(xiàn)的,但是用在vue,angular上,基本模式同樣適用.關(guān)鍵就是掌握好不同框架的生命周期.
在學(xué)習(xí)實(shí)現(xiàn)json編輯器組件之前,我們有必要了解一下jsoneditor這個(gè)第三方組件的用法與api.
jsoneditor的使用
- 安裝
我們先執(zhí)行npm install安裝我們的組件
npm install jsoneditor
其次手動(dòng)引入樣式文件
<link href="jsoneditor/dist/jsoneditor.min.css" rel="external nofollow" rel="stylesheet" type="text/css">
這樣,我們就能使用它的api了:
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
<script>
// 創(chuàng)建編輯器
var container = document.getElementById("jsoneditor");
var editor = new JSONEditor(container);
// 設(shè)置json數(shù)據(jù)
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數(shù)據(jù)
function getJSON() {
var json = editor.get();
alert(JSON.stringify(json, null, 2));
}
</script>
所以你可能看到如下界面:
為了能實(shí)現(xiàn)實(shí)時(shí)預(yù)覽和編輯,光這樣還遠(yuǎn)遠(yuǎn)不夠,我們還需要進(jìn)行額外的處理.我們需要用到j(luò)soneditor其他的api和技巧.
結(jié)合react進(jìn)行二次封裝
基于以上談?wù)?我們很容易將編輯器封裝成react組件, 我們只需要在componentDidMount生命周期里初始化實(shí)例即可.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里的選項(xiàng), 我們可以參考jsoneditor的API文檔,里面寫的很詳細(xì), 通過(guò)以上代碼,我們便可以實(shí)現(xiàn)一個(gè)基本的react版的json編輯器組件.接下來(lái)我們來(lái)按照設(shè)計(jì)思路一步步實(shí)現(xiàn)可實(shí)時(shí)預(yù)覽的json編輯器組件.
- 實(shí)現(xiàn)預(yù)覽和編輯視圖
其實(shí)這一點(diǎn)很好實(shí)現(xiàn),我們只需要實(shí)例化2個(gè)編輯器實(shí)例,一個(gè)用于預(yù)覽,一個(gè)用于編輯就好了.
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
這樣,我們便能實(shí)現(xiàn)一個(gè)初步的可實(shí)時(shí)預(yù)覽的編輯器.可能效果長(zhǎng)這樣:
接近于成熟版,但是還有很多細(xì)節(jié)要處理.
- 對(duì)外暴露屬性和方法以支持不同場(chǎng)景的需要
import React, { PureComponent } from 'react'
import JSONEditor from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.css'
class JsonEditor extends PureComponent {
// 監(jiān)聽輸入值的變化
onChange = () => {
let value = this.jsoneditor.get()
this.props.onChange && this.props.onChange(value)
this.viewJsoneditor.set(value)
}
// 對(duì)外暴露獲取編輯器的json數(shù)據(jù)
getJson = () => {
this.props.getJson && this.props.getJson(this.jsoneditor.get())
}
// 對(duì)外提交錯(cuò)誤信息
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()
// 設(shè)置主題色
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
通過(guò)以上的過(guò)程,我們已經(jīng)完成一大半工作了,剩下的細(xì)節(jié)和優(yōu)化工作,比如組件卸載時(shí)如何卸載實(shí)例, 對(duì)組件進(jìn)行類型檢測(cè)等,我們繼續(xù)完成以上問(wèn)題.
- 使用PropTypes進(jìn)行類型檢測(cè)以及在組件卸載時(shí)清除實(shí)例 類型檢測(cè)時(shí)react內(nèi)部支持的,安裝react的時(shí)候會(huì)自動(dòng)幫我們安裝PropTypes,具體用法可參考官網(wǎng)地址propTypes文檔,其次我們會(huì)在react的componentWillUnmount生命周期中清除編輯器的實(shí)例以釋放內(nèi)存.完整代碼如下:
import React, { PureComponent } from 'react'
import JSONEditor from 'jsoneditor'
import PropTypes from 'prop-types'
import 'jsoneditor/dist/jsoneditor.css'
/**
* JsonEditor
* @param {object} json 用于綁定的json數(shù)據(jù)
* @param {func} onChange 變化時(shí)的回調(diào)
* @param {func} getJson 為外部提供回去json的方法
* @param {func} onError 為外部提供json格式錯(cuò)誤的回調(diào)
* @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()
// 設(shè)置主題色
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
由于組件嚴(yán)格遵守開閉原則,所以我們可以提供更加定制的功能在我們的json編輯器中,已實(shí)現(xiàn)不同項(xiàng)目的需求.對(duì)于組件開發(fā)的健壯性探討,除了使用propTypes外還可以基于typescript開發(fā),這樣適合團(tuán)隊(duì)開發(fā)組件庫(kù)或者復(fù)雜項(xiàng)目組件的追溯和查錯(cuò).最終效果如下:
筆者已經(jīng)將實(shí)現(xiàn)過(guò)的組件發(fā)布到npm上了,大家如果感興趣可以直接用npm安裝后使用,方式如下:
npm i @alex_xu/xui
// 導(dǎo)入xui
import {
Button,
Skeleton,
Empty,
Progress,
Tag,
Switch,
Drawer,
Badge,
Alert
} from '@alex_xu/xui'
該組件庫(kù)支持按需導(dǎo)入,我們只需要在項(xiàng)目里配置babel-plugin-import即可,具體配置如下:
// .babelrc
"plugins": [
["import", { "libraryName": "@alex_xu/xui", "style": true }]
]
npm庫(kù)截圖如下:
以上就是jsoneditor二次封裝實(shí)時(shí)預(yù)覽json編輯器組件react版的詳細(xì)內(nèi)容，更多關(guān)于jsoneditor二次封裝json的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
教你快速搭建 React Native 開發(fā)環(huán)境
這篇文章主要介紹了搭建 React Native 開發(fā)環(huán)境的詳細(xì)過(guò)程,本文通過(guò)圖文指令給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
現(xiàn)在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發(fā)深深的吸引了我，下面來(lái)跟我一起領(lǐng)略ReactJs的風(fēng)采吧~~ 文章有點(diǎn)長(zhǎng)，耐心讀完，你會(huì)有很大收獲哦2021-04-04
本文主要介紹了React的相關(guān)知識(shí)，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信)，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下2017-09-09
基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件
這篇文章主要為大家詳細(xì)介紹了如何基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-01-01
react實(shí)現(xiàn)記錄拖動(dòng)排序
這篇文章主要介紹了react實(shí)現(xiàn)記錄拖動(dòng)排序的相關(guān)資料,需要的朋友可以參考下2023-07-07
React中項(xiàng)目路由配置與跳轉(zhuǎn)方法詳解
這篇文章主要為大家詳細(xì)介紹了React中項(xiàng)目路由配置與跳轉(zhuǎn)方法的相關(guān)資料，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下2023-08-08
這篇文章給大家總結(jié)了React中常用的一些鉤子函數(shù),文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了詳解React中Fragment的簡(jiǎn)單使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)我們學(xué)習(xí)React有一定的幫助，感興趣的小伙伴們可以參考一下2022-10-10
使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程
這篇文章主要給大家介紹了關(guān)于使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08