今天就跟大家聊聊有關(guān)web開發(fā)中如何二次封裝一個可實時預(yù)覽的json編輯器，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供績溪網(wǎng)站建設(shè)、績溪做網(wǎng)站、績溪網(wǎng)站設(shè)計、績溪網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、績溪企業(yè)網(wǎng)站模板建站服務(wù)，10年績溪做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
做為一名前端開發(fā)人員,掌握vue/react/angular等框架已經(jīng)是必不可少的技能了,我們都知道,vue或react等MVVM框架提倡組件化開發(fā),這樣一方面可以提高組件復用性和可擴展性,另一方面也帶來了項目開發(fā)的靈活性和可維護,方便多人開發(fā)協(xié)作.接下來文章將介紹如何使用react,開發(fā)一個自定義json編輯器組件.我們這里使用了jsoneditor這個第三方庫,官方地址: jsoneditor 通過實現(xiàn)一個json在線編輯器,來學習如何一步步封裝自己的組件(不限于react,vue,原理類似).
在介紹組件設(shè)計思路之前,有必要介紹一下著名的SOLID原則.
SOLID(單一功能、開閉原則、里氏替換、接口隔離以及依賴反轉(zhuǎn))是由羅伯特·C·馬丁提出的面向?qū)ο缶幊毯兔嫦驅(qū)ο笤O(shè)計的五個基本原則。利用這些原則，程序員能更容易和高效的開發(fā)一個可維護和擴展的系統(tǒng)。SOLID被典型的應(yīng)用在測試驅(qū)動開發(fā)上，并且是敏捷開發(fā)以及自適應(yīng)軟件開發(fā)的基本原則的重要組成部分。
S 單一功能原則: 規(guī)定每個類都應(yīng)該有一個單一的功能，并且該功能應(yīng)該由這個類完全封裝起來。所有它的服務(wù)都應(yīng)該嚴密的和該功能保持一致。
O 開閉原則: 規(guī)定“軟件中的對象(類，模塊，函數(shù)等等)應(yīng)該對于擴展是開放的，但是對于修改是封閉的”，這意味著一個實體是允許在不改變它的源代碼的前提下變更它的行為。遵循這種原則的代碼在擴展時并不需要改變。
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)細節(jié)，依賴關(guān)系被顛倒(反轉(zhuǎn))，從而使得低層次模塊依賴于高層次模塊的需求抽象。
掌握好這5個原則將有利于我們開發(fā)出更優(yōu)秀的組件,請默默記住.接下來我們來看看json編輯器的設(shè)計思路.
如上所示, 和任何一個輸入框一樣, 參考antd組件設(shè)計方式并兼容antd的form表單, 我們提供了onChange方法.(具體細節(jié)下文會詳細介紹)
首先利用jsoneditor渲染的基本樣式以及API,我們能實現(xiàn)一個基本可用的json編輯器,然后通過對外暴露的json和onChange屬性進行數(shù)據(jù)雙向綁定, 通過onError來監(jiān)控異?；蛘咻斎氲腻e誤, 通過themeBgColor來修改默認的主題色,通過這幾個接口,我們便能完全掌握一個組件的運行情況.
接下來我們就正式開始我們的正文.由于本文的組件是基于react實現(xiàn)的,但是用在vue,angular上,基本模式同樣適用.關(guān)鍵就是掌握好不同框架的生命周期.
在學習實現(xiàn)json編輯器組件之前,我們有必要了解一下jsoneditor這個第三方組件的用法與api.
安裝
我們先執(zhí)行npm install安裝我們的組件
npm install jsoneditor
其次手動引入樣式文件
這樣,我們就能使用它的api了:
所以你可能看到如下界面:
為了能實現(xiàn)實時預(yù)覽和編輯,光這樣還遠遠不夠,我們還需要進行額外的處理.我們需要用到j(luò)soneditor其他的api和技巧.
基于以上談?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 this.container = elem} /> } } export default JsonEditor 至于options里的選項, 我們可以參考jsoneditor的API文檔,里面寫的很詳細, 通過以上代碼,我們便可以實現(xiàn)一個基本的react版的json編輯器組件.接下來我們來按照設(shè)計思路一步步實現(xiàn)可實時預(yù)覽的json編輯器組件.
其實這一點很好實現(xiàn),我們只需要實例化2個編輯器實例,一個用于預(yù)覽,一個用于編輯就好了.
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 ( this.container = elem} /> this.viewContainer = elem} /> 這樣,我們便能實現(xiàn)一個初步的可實時預(yù)覽的編輯器.可能效果長這樣:
接近于成熟版,但是還有很多細節(jié)要處理.
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 ( this.container = elem} /> this.viewContainer = elem} /> 通過以上的過程,我們已經(jīng)完成一大半工作了,剩下的細節(jié)和優(yōu)化工作,比如組件卸載時如何卸載實例, 對組件進行類型檢測等,我們繼續(xù)完成以上問題.
類型檢測時react內(nèi)部支持的,安裝react的時候會自動幫我們安裝PropTypes,具體用法可參考官網(wǎng)地址propTypes文檔,其次我們會在react的componentWillUnmount生命周期中清除編輯器的實例以釋放內(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 變化時的回調(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 ( this.container = elem} /> this.viewContainer = elem} /> ); } } JsonEditor.propTypes = { json: PropTypes.object, onChange: PropTypes.func, getJson: PropTypes.func, onError: PropTypes.func, themeBgColor: PropTypes.string } export default JsonEditor 由于組件嚴格遵守開閉原則,所以我們可以提供更加定制的功能在我們的json編輯器中,已實現(xiàn)不同項目的需求.對于組件開發(fā)的健壯性探討,除了使用propTypes外還可以基于typescript開發(fā),這樣適合團隊開發(fā)組件庫或者復雜項目組件的追溯和查錯.最終效果如下:
筆者已經(jīng)將實現(xiàn)過的組件發(fā)布到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庫截圖如下:
看完上述內(nèi)容，你們對web開發(fā)中如何二次封裝一個可實時預(yù)覽的json編輯器有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
