基于Jsoneditor二次封裝一個可實時預覽的Json編輯器組件(React版)

作者：徐小夕 2023-04-10 08:30:30

由于組件嚴格遵守開閉原則,所以我們可以提供更加定制的功能在我們的json編輯器中,已實現(xiàn)不同項目的需求.對于組件開發(fā)的健壯性探討,除了使用propTypes外還可以基于typescript開發(fā),這樣適合團隊開發(fā)組件庫或者復雜項目組件的追溯和查錯.

前言

做為一名前端開發(fā)人員,掌握vue/react/angular等框架已經是必不可少的技能了,我們都知道,vue或react等MVVM框架提倡組件化開發(fā),這樣一方面可以提高組件復用性和可擴展性,另一方面也帶來了項目開發(fā)的靈活性和可維護,方便多人開發(fā)協(xié)作.接下來文章將介紹如何使用react,開發(fā)一個自定義json編輯器組件.我們這里使用了jsoneditor這個第三方庫,官方地址: jsoneditor 通過實現(xiàn)一個json在線編輯器,來學習如何一步步封裝自己的組件(不限于react,vue,原理類似).

你將學到:

react組件封裝的基本思路
SOLID (面向對象設計)原則介紹
jsoneditor用法
使用PropTypes做組件類型檢查

設計思路

在介紹組件設計思路之前,有必要介紹一下著名的SOLID原則.

SOLID（單一功能、開閉原則、里氏替換、接口隔離以及依賴反轉）是由羅伯特·C·馬丁提出的面向對象編程和面向對象設計的五個基本原則。利用這些原則，程序員能更容易和高效的開發(fā)一個可維護和擴展的系統(tǒng)。 SOLID被典型的應用在測試驅動開發(fā)上，并且是敏捷開發(fā)以及自適應軟件開發(fā)的基本原則的重要組成部分。

S所有它的服務都應該嚴密的和該功能保持一致。
O遵循這種原則的代碼在擴展時并不需要改變。
L
I接口隔離原則(ISP)拆分非常龐大臃腫的接口成為更小的和更具體的接口，這樣應用或對象只需要知道它們感興趣的方法。這種縮小的接口也被稱為角色接口。接口隔離原則(ISP)的目的是系統(tǒng)去耦合，從而容易重構，更改和重新部署。接口隔離原則是在SOLID (面向對象設計)中五個面向對象設計(OOD)的原則之一，類似于在GRASP (面向對象設計)中的高內聚性。
D

掌握好這5個原則將有利于我們開發(fā)出更優(yōu)秀的組件,請默默記住.接下來我們來看看json編輯器的設計思路.

如上所示, 和任何一個輸入框一樣, 參考antd組件設計方式并兼容antd的form表單, 我們提供了onChange方法.(具體細節(jié)下文會詳細介紹)

首先利用jsoneditor渲染的基本樣式以及API,我們能實現(xiàn)一個基本可用的json編輯器,然后通過對外暴露的json和onChange屬性進行數據雙向綁定, 通過onError來監(jiān)控異?；蛘咻斎氲腻e誤, 通過themeBgColor來修改默認的主題色,通過這幾個接口,我們便能完全掌握一個組件的運行情況.

正文

接下來我們就正式開始我們的正文.由于本文的組件是基于react實現(xiàn)的,但是用在vue,angular上,基本模式同樣適用.關鍵就是掌握好不同框架的生命周期.

在學習實現(xiàn)json編輯器組件之前,我們有必要了解一下jsoneditor這個第三方組件的用法與api.

1. jsoneditor的使用

我們先執(zhí)行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>
    // 創(chuàng)建編輯器
    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>

所以你可能看到如下界面:

為了能實現(xiàn)實時預覽和編輯,光這樣還遠遠不夠,我們還需要進行額外的處理.我們需要用到jsoneditor其他的api和技巧.

2. 結合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文檔,里面寫的很詳細, 通過以上代碼,我們便可以實現(xiàn)一個基本的react版的json編輯器組件.接下來我們來按照設計思路一步步實現(xiàn)可實時預覽的json編輯器組件.

3. 實現(xiàn)預覽和編輯視圖

其實這一點很好實現(xiàn),我們只需要實例化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

這樣,我們便能實現(xiàn)一個初步的可實時預覽的編輯器.可能效果長這樣:

接近于成熟版,但是還有很多細節(jié)要處理.

4. 對外暴露屬性和方法以支持不同場景的需要

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)
  }
  // 對外暴露獲取編輯器的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.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

通過以上的過程,我們已經完成一大半工作了,剩下的細節(jié)和優(yōu)化工作,比如組件卸載時如何卸載實例, 對組件進行類型檢測等,我們繼續(xù)完成以上問題.

5. 使用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.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>
    );
  }
}

JsonEditor.propTypes = {
  json: PropTypes.object,
  onChange: PropTypes.func,
  getJson: PropTypes.func,
  onError: PropTypes.func,
  themeBgColor: PropTypes.string
}

export default JsonEditor

責任編輯：武曉燕來源：趣談前端

自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡