手把手教你開發可視化搭建平臺

作過一些可視化搭建相關的工做，心得思考，和你們分享。
複製代碼

前端同窗的工做內容中，經常有不少時間在寫頁面。組件化的出現，很大程度的提升了這方面的效率，也解決了標準化的問題。

但這還遠遠不夠。

咱們但願能經過 low-code 的方式，WYSIWYG（所見即所得） 的方式，將網頁開發這件事變得更加簡單，更加普及。試想，若是產品或運營能直接經過平臺拖拖拽拽生成一個頁面，這件事是否是頗有價值？

不少大型項目都在嘗試用組件化+可視化搭建的方式解決這個問題。但在這個過程當中，咱們總會遇到各類各樣的阻礙。好比：用戶端的產品老是很難找到共通點，運營類的業務面對的更是設計上沒法複製的創意。商業端的產品還好說，對 UI 沒有太多定製需求，另外也關注體驗一致性。

所以商業端產品搭配一套 ant.design 就能夠開始搞可視化搭建啦。可是用戶端產品先要想清楚定位，若是是一個長線，大規模的業務，一開始定義好「組件化」的思路對後面的工做相當重要。若是是一個偏運營向的業務，也能夠有2中解決思路：豐富的組件化+可視化搭建 vs 智能化生成代碼（根據設計稿還原HTML）。

阿里內部有不少嘗試，比較有表明性的開源項目（其實也有不少優秀的還未開源的）：

1. 飛冰 定義組件，拖拽生成頁面
2. imgcook 根據設計稿生成可維護代碼，在此基礎上進行拖拽配置編輯等二次操做

分別表明了2種思路，一種是先定義好組件——可拖拽的物料，一種是沒有預先設定，直接根據算法識別對應到最基礎的 HTML 標籤。各有各的優點和試用場景，對於一個長期發展，迭代的項目來講，前者更具備維護性。畢竟搭建物料（組件）的設計緊緊掌握在開發者的手中。

那麼，接下來咱們經過一系列文章，來動手搞一個可視化搭建平臺。

首先先介紹一些概念：

1. 核心功能：組件的定義和導入，拖拽，字段配置，數據綁定，事件交互。
2. 操做流程：經過拖拽組件生成頁面，對組件進行一些配置操做，而後導入數據源，進行字段綁定，添加自定義交互（代碼），最終導出頁面。
3. 功能分區：物料區，搭建區，配置區，平臺操做面板（可擴展）。

物料區

物料區組件的設計包含2部分：

1. 組件的內部實現
2. 組件可配置選項的描述(組件描述協議)

搭建區

1. 佈局方式
   • 絕對定位
   • 基於組件樹的結構化佈局方式（可維護性強）
2. 渲染方式
   • iframe：渲染結果和平臺無關，iframe 與外層通訊或者在 iframe 之上覆蓋一個操做區
   • 包裹法：在組件外層包裹一層 DOM，封裝一些拖拽操做（平臺與組件同語言則最佳）

配置區

1. 設置器（setter）的實現（表單）
2. 結果變動從新觸發渲染

以上，咱們採用結構化佈局，包裹的渲染方式，加上一些設置器。就是一個特別簡單的可視化搭建啦。下次，我來貼上代碼實現哦。