前言

前段時間發(fā)在朋友圈的一句話：各種自主搭建的平臺，想起好多年各種DIY博客，行業(yè)門戶網(wǎng)站，本質(zhì)不變，變的是實現(xiàn)的手段了。

正文從這開始～～

本文主要介紹了基于 React 構(gòu)建可視化編輯平臺的實踐，包括對可視化拖拽布局、在線編輯、同構(gòu)直出的實現(xiàn)。

背景

目前，HRG 的英才校園在線招聘業(yè)務(wù)有大量的企業(yè)定制化需求，企業(yè)在英才校園做招聘，同時也希望有自己的招聘主頁，每年都會招聘一部分兼職同學(xué)來開發(fā)這類的招聘主頁，這類招聘主頁通常不復(fù)雜，但是如果全部需要前端同學(xué)實現(xiàn)的話，還是很耗時費力的，我們希望能通過技術(shù)手段不斷的提升這類業(yè)務(wù)的交付效率。

提效規(guī)劃

定制頁相關(guān)的項目，早期是通過靜態(tài)頁來做的，純靜態(tài)頁對開發(fā)者來說上手容易，但是很難做組件化，上線流程完全靠手工，成本太高，所以我們計劃逐步推進通過可視化編輯提升效率。

項目整體分了兩期：

一期，實現(xiàn)了可視化的在線編輯、發(fā)布，支持流式布局、絕對定位布局、同構(gòu)直出、動畫，提供了通用的組件庫。

二期，支持組件可擴展，提供組件開發(fā)工具，組件市場，三期仍在完善階段，暫未發(fā)布。

系統(tǒng)演示

首先看下我們的系統(tǒng)演示，然后再逐步分析深入，主要是可視化編輯系統(tǒng)開發(fā)思路，以及關(guān)鍵模塊的實現(xiàn)。

系統(tǒng)維度分析

針對可視化編輯平臺，我們做了一些調(diào)研，有一些思想我們覺得挺有意義，這里分享一下，參考文章見參考文獻。

我們的系統(tǒng)，對標(biāo)上面的維度應(yīng)該下面三項：

系統(tǒng)功能

Component Tree 編輯，核心功能為頁面可視化布局設(shè)計

頁面由組件組成，組件可以支持嵌套，目前組件是通用的組件，后期會支持擴展，組件可以承載業(yè)務(wù)邏輯。

提供了拖拽布局支持，支持流式布局，絕對定位布局。

面向客群

前端小白，核心訴求是交互性高，所見即所得的編輯方式

目前是組內(nèi)兼職的同學(xué)在用，有一定的前端布局基礎(chǔ)，理解每個組件的使用方式。

如果想降低對用戶的要求，比如對普通用戶，那么就要提供模板支持，對普通用戶而言，改改背景圖，換個圖片，編輯下文字就夠用了，越是要降低對用戶的要求，越是要固化一些設(shè)計和數(shù)據(jù)模型。

編輯自由度

前端框架組件，依賴工具提供組件，編輯效率高，業(yè)務(wù)邏輯封裝度高

目前系統(tǒng)的自由度是組件級別，內(nèi)置了通用的組件，包括：

• 基礎(chǔ)組件：圖片、文本、表格、模板組件
• 復(fù)雜組件：數(shù)據(jù)列表、跑馬燈、輪播圖、表格
• 布局：錨點布局、標(biāo)準(zhǔn)布局、選項卡布局
• 容器：上下流(塊)，左右流(內(nèi)聯(lián)塊)，自由容器(絕對定位布局)

這些組件是內(nèi)置到系統(tǒng)的，二期的組件市場，目標(biāo)是組件可擴展，組件可以承載業(yè)務(wù)，業(yè)務(wù)邏輯封裝度更高些，方便使用。

技術(shù)實現(xiàn)

系統(tǒng)采用技術(shù)棧如下：

• 前端：React + Redux + ImmutableJs + ReactDND + Antd
• 后端：Node Express + MongoDB + Redis

可視化布局

首先，需要定義渲染UI的數(shù)據(jù)結(jié)構(gòu)，通常這種UI的數(shù)據(jù)都是樹形的結(jié)構(gòu)，可以用一個大的 JSON 來表示，然后遞歸渲染。

類似如下的結(jié)構(gòu)：

節(jié)點使用類似 React 的虛擬 DOM 結(jié)構(gòu)：

• Type ：組件類型
• Props ：組件屬性
• Children：組件的子節(jié)點列表
• Sort：排序號

由于直接使用樹形的的結(jié)構(gòu)，對節(jié)點的增刪改查不友好，所有進行了扁平化處理，將樹拆成了兩個結(jié)構(gòu)：

結(jié)構(gòu)一：

存儲節(jié)點的關(guān)系，類似一個數(shù)據(jù)庫的二維表，描述節(jié)點的父子關(guān)系，方便修改父子結(jié)構(gòu)，同級排序。

結(jié)構(gòu)二：

存儲節(jié)點的數(shù)據(jù)，通過 ID 可以獲取節(jié)點數(shù)據(jù)，方便節(jié)點數(shù)據(jù)更新。

其次，定義好數(shù)據(jù)結(jié)構(gòu)以后，就是渲染頁面了，將上面的兩個數(shù)據(jù)合并組成樹形結(jié)構(gòu)，然后遞歸遍歷創(chuàng)建組件對象。

創(chuàng)建組件的時候，需要獲取對應(yīng)的組件類型，比如導(dǎo)航組件，輪播圖組件，所以需要一個組件的類型映射表，根據(jù)組件的 Type 獲取對應(yīng)的類型，創(chuàng)建實例。

還有組件的布局能力，布局功能抽到容器里，所以組件在創(chuàng)建的時候會包裹對應(yīng)的容器，組件的定位由容器負責(zé)，不同的容器提供不同的功能，容器由高階組件提供。

如下圖所示：

圖中 typeFactory 負責(zé)組件的創(chuàng)建，創(chuàng)建組件的同時包裹對應(yīng)的高階組件，

這里是組件在編輯狀態(tài)的渲染過程，發(fā)布以后，考慮的渲染的性能，預(yù)先創(chuàng)建了組件的樹形結(jié)構(gòu)。

最后，實現(xiàn)拖拽布局，布局完全是容器來負責(zé)，拖拽過程的位置檢測由容器來實現(xiàn)，通過鼠標(biāo)位置確定組件的安放位置，修改描述組件關(guān)系的數(shù)據(jù)，觸發(fā)重新渲染。

流式布局演示：

自由布局演示：

組件屬性編輯

前面說了組件的布局，除了布局，還要對組件的屬性進行編輯，編輯也是通過容器來實現(xiàn)的，通過高階組件來復(fù)用。

組件也需要遵守一個規(guī)范，方便獲取組件的屬性列表，為組件增加額外的靜態(tài)屬性來說明組件的屬性說明。

系統(tǒng)提供了組件屬性編輯器，同時可以支持擴展出其他自定義編輯器。

同構(gòu)直出

因為定制頁是需要 SEO 的，所以要做服務(wù)器端渲染，也就是要做同構(gòu)直出。

做同構(gòu)直出需要考慮以下內(nèi)容：

• 全局的 Store(Redux)
• 組件內(nèi) CSS 抽取(Glamor)
• 針對 Node 端單獨構(gòu)建一個組件庫，忽略組件內(nèi) less 的引用
• 設(shè)置 externals 避免包過大
• 組件內(nèi)異步獲取的數(shù)據(jù)，通過為組件加靜態(tài)屬性 getInitProps(參考Next框架)

Store 中存儲了組件樹和組件屬性數(shù)據(jù)，直出的不僅僅是 HTML，還包括對應(yīng)的 CSS，這里使用 css in js 方案 Glamor，渲染 HTML 的同時，也可以提取對應(yīng)的 CSS。

下面是同構(gòu)直出的大致流程：

同構(gòu)直出的渲染結(jié)果：

為了減小首次渲染頁面的體積，并沒有把狀態(tài)數(shù)據(jù)內(nèi)嵌到頁面里，而是提供了一個狀態(tài)的的請求鏈接，異步加載狀態(tài)數(shù)據(jù)。

一階段完成以后，開始上線運行支持業(yè)務(wù)，目前已經(jīng)支持 100+ 的定制頁項目，通過在線編輯、修改、發(fā)布，節(jié)約了大部分編碼、構(gòu)建、發(fā)布的時間，開發(fā)效率大幅提升。

組件可擴展

由于一階段是內(nèi)置的組件庫，包括通用組件以及定制頁業(yè)務(wù)相關(guān)的組件，二階段希望能實現(xiàn)組件可擴展，提升平臺的應(yīng)用范圍，實現(xiàn)頁面級的組件，增強易用性。

組件市場

組件市場是一個組件的集合，提供可選的組件，組件的粒度可以開發(fā)者控制，可以是組件級，也可以是頁面級，可以內(nèi)嵌業(yè)務(wù)，或者是通用的組件。

組件開發(fā)CLI工具

提供組件開發(fā)腳手架，本地開發(fā)、調(diào)試環(huán)境，可以發(fā)布組件到組件市場。

組件動態(tài)加載

為了動態(tài)加載組件，我們開發(fā)了模塊加載器 BondJs，可以動態(tài)加載頁面依賴的所有組件，將組件注冊到系統(tǒng)里。

目前組件市場還處于完善階段，計劃年底上線，磨合一段時間，后期希望可以積累更多的模板，接入其他業(yè)務(wù)，能提升運營類項目的效率。

關(guān)于第二階段的后續(xù)有機會可以再詳細說明，這里不展開了。

易用性分析

目前平臺是給內(nèi)部開發(fā)者使用，因為編輯自由度高，需要有一定的前端基礎(chǔ)，系統(tǒng)也提供了模板功能，直接從模板編輯相對易用一些，不過，仍是對頁面內(nèi)元素的編輯，對運營/產(chǎn)品/企業(yè)用戶來說還是有一定的難度。

對普通用戶來說，最容易懂的模型不是頁面的元素，而是業(yè)務(wù)模型，比如用戶信息、企業(yè)信息、職位信息這一類更貼近用戶的模型，所以后期組內(nèi)同學(xué)和后端同學(xué)一起開發(fā)基于后端模板的解決方案，這個方案的優(yōu)點是可以利用企業(yè)招聘方的數(shù)據(jù)模型，比如企業(yè)介紹、職位列表等數(shù)據(jù)，再提供多個后端預(yù)置模板，企業(yè)只需要維護自己的信息，然后選擇一個模板即可，可以滿足對定制頁要求不那么高的用戶。

靈活性和易用性是需要平衡的，越靈活往往易用性比較差，一般是通過預(yù)定義來說提升易用性，細粒度的組件很靈活，但是易用性差，后續(xù)可以開發(fā)內(nèi)嵌業(yè)務(wù)的頁面級組件，來提升易用性。

總結(jié)

目前，整個編輯平臺已經(jīng)支持了 100+ 的項目，針對復(fù)雜度不高的項目可以很大提升開發(fā)效率，整個項目因為是 Side Project ，一邊支持業(yè)務(wù)一邊開發(fā)，所以花了不少時間，回過頭來看，做這類項目，首先要有明確的目標(biāo)和受眾，是為開發(fā)者賦能，還是服務(wù)普通用戶，可視化布局也不是銀彈，所以要想好真正影響效率的地方。比如有些項目開發(fā)快，但是面對用戶的頻繁修改需求，效率也很難提升，反過來要控制用戶的需求變更，如果客戶要求不高，直接給個默認模板就可以，或者提供多樣的選擇，讓用戶選擇相對滿意的模板即可。

后期組件市場上線，希望可以接入不同的業(yè)務(wù)線，提供更多面向業(yè)務(wù)的組件或者頁面模板，提升系統(tǒng)的應(yīng)用廣度，提升運營類項目的開發(fā)效率。

關(guān)于本文 作者：@Refector

原文：https://zhuanlan.zhihu.com/p/94016600

總結(jié)

以上是生活随笔為你收集整理的前段react技术架构图_基于 React 的可视化编辑平台实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。