綠樹成蔭

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

你將學(xué)到:

• react組件封裝的基本思路
• SOLID (面向?qū)ο笤O(shè)計)原則介紹
• jsoneditor用法
• 使用PropTypes做組件類型檢查

設(shè)計思路

在介紹組件設(shè)計思路之前,有必要介紹一下著名的SOLID原則。

SOLID(單一功能、開閉原則、里氏替換、接口隔離以及依賴反轉(zhuǎn))是由羅伯特·C·馬丁提出的面向?qū)ο缶幊毯兔嫦驅(qū)ο笤O(shè)計的五個基本原則。利用這些原則，程序員能更容易和高效的開發(fā)一個可維護(hù)和擴(kuò)展的系統(tǒng)。SOLID被典型的應(yīng)用在測試驅(qū)動開發(fā)上，并且是敏捷開發(fā)以及自適應(yīng)軟件開發(fā)的基本原則的重要組成部分。

• S 單一功能原則: 規(guī)定每個類都應(yīng)該有一個單一的功能，并且該功能應(yīng)該由這個類完全封裝起來。所有它的服務(wù)都應(yīng)該嚴(yán)密的和該功能保持一致。
• O 開閉原則: 規(guī)定“軟件中的對象(類，模塊，函數(shù)等等)應(yīng)該對于擴(kuò)展是開放的，但是對于修改是封閉的”，這意味著一個實體是允許在不改變它的源代碼的前提下變更它的行為。遵循這種原則的代碼在擴(kuò)展時并不需要改變。
• L 里氏替換原則: 派生類(子類)對象可以在程序中代替其基類(超類)對象,是對子類型的特別定義。
• I 接口隔離原則: 指明應(yīng)用或者對象應(yīng)該不依賴于它不使用的方法。接口隔離原則(ISP)拆分非常龐大臃腫的接口成為更小的和更具體的接口，這樣應(yīng)用或?qū)ο笾恍枰浪鼈兏信d趣的方法。這種縮小的接口也被稱為角色接口。接口隔離原則(ISP)的目的是系統(tǒng)去耦合，從而容易重構(gòu)，更改和重新部署。接口隔離原則是在SOLID (面向?qū)ο笤O(shè)計)中五個面向?qū)ο笤O(shè)計(OOD)的原則之一，類似于在GRASP (面向?qū)ο笤O(shè)計)中的高內(nèi)聚性。
• D 依賴反轉(zhuǎn)原則: 是指一種特定的解耦 形式，使得高層次的模塊不依賴于低層次的模塊的實現(xiàn)細(xì)節(jié)，依賴關(guān)系被顛倒(反轉(zhuǎn))，從而使得低層次模塊依賴于高層次模塊的需求抽象。

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

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

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

正文

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

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

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); 
 
    // 設(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> 

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

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

結(jié)合react進(jìn)行二次封裝

基于以上談?wù)?我們很容易將編輯器封裝成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 

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 { 
  // 監(jiān)聽輸入值的變化 
  onChange = () => { 
    let value = this.jsoneditor.get() 
    this.props.onChange && this.props.onChange(value) 
    this.viewJsoneditor.set(value) 
  } 
  // 對外暴露獲取編輯器的json數(shù)據(jù) 
  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}` 
  } 
 
  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 

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 變化時的回調(diào) 
 * @param {func} getJson 為外部提供回去json的方法 
 * @param {func} onError 為外部提供json格式錯誤的回調(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 

npm i @alex_xu/xui 
 
// 導(dǎo)入xui 
import {  
  Button, 
  Skeleton, 
  Empty, 
  Progress, 
  Tag, 
  Switch, 
  Drawer, 
  Badge, 
  Alert 
} from '@alex_xu/xui' 

// .babelrc 
"plugins": [ 
  ["import", { "libraryName": "@alex_xu/xui", "style": true }] 
]