綠樹成蔭

做為一名前端開發人員,掌握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.themeBgColorthis.container.querySelector('.jsoneditor').style.border?=?`thin?solid?${this.props.themeBgColor}`this.viewContainer.querySelector('.jsoneditor-menu').style.backgroundColor?=?this.props.themeBgColorthis.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.themeBgColorthis.container.querySelector('.jsoneditor').style.border?=?`thin?solid?${this.props.themeBgColor}`this.viewContainer.querySelector('.jsoneditor-menu').style.backgroundColor?=?this.props.themeBgColorthis.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庫截圖如下:

H5-Dooring, 讓H5制作, 更簡單

好啦, 今天的分享就到這啦, 如果文章對你有幫助, 歡迎?「點贊」?+?「在看」, 鼓勵作者創造更優質的內容~

點個在看你最好看

總結

以上是生活随笔為你收集整理的前端: 从零封装一个可实时预览的json编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。