簡介

本章節從精准定位、分層設計、非同步組件、拖拽四個方面分析飛碼畫布設計。

一、精准定位設計

飛碼畫布是一個套件，可對外提供畫布能力。精准定位有兩種情況，一是目標組件無子組件，而是目標組件有子組件。

無子組件：目標組件分為支持與不支持放子組件兩種情況。

有子組件：滑鼠相對於子組件（目標組件）對角線位置。詳見圖1

圖1

當目標組件不支持放子組件時，需要計算拖拽組件放在目標組件的左側、上側、右側、還是下側？其計算方法如圖2

圖2

通過滑鼠位置，目標組件，組件對角線坐標位置可推導出圖1右側圖拖拽組件與目標組件位置關係。

問題：飛碼為何不提供尺度（x、y），這樣可以精準知道組件大小？

實際使用過程中，搭建人員並不關心組件的具體x，y。一般關註一行幾列與組件寬度。

二、分層設計

低代碼畫布設計有很多方案，飛碼採用的是雙層設計模式。該設計模式優勢很多，與畫布中組件是解耦關係。開發過iOS，安卓native的同學較容易理解。如圖3

圖3

畫布中底層是組件渲染層，根據頁面DSL渲染組件佈局，在組件渲染層上還有一層canvas-mask視圖。當點擊某一個組件之後，根據組件會在組件最邊框添加顏色，組件右側上方（根據頁面佈局自動切換到下方）添加工具條（更多、上移、下移、複製、刪除），hover區域。支持組件寬度拖拽調整，組件的最右側有一個呼吸道效果的線條，滑鼠可以對該組件寬度進行拖拽調整。這樣極大方便了樣式調整操作。

問題：既然支持了組件左右大小調整，為何不支持組件的上下大小調整？

飛碼對div，form等容器組件在編輯態中上下大小會根據子組件高度進行自動調整。飛碼並不知道組件的寬度大小。

三、非同步組件

飛碼提供常用的組件能力，飛碼搭建業務定製化的組件困難。飛碼提供動態載入組件能力，動態組件載入分為編輯態與運行態。編輯態在組件拖到頁面的時候會根據組件數據中type判斷當前組件類型。若type=2，飛碼引擎會創建script下載相關url對應的組件，之後做緩存。運行態思路一致。

四、拖拽設計

拖拽組件的時，每一個組件需要混入一些特定處理，例如form表單的子組件是不是el-form-item等情況。見圖4

圖4

組件拖拽開始會記錄currentTarget獲取到組件id，並對dataTransfer進行設置image。這樣就可以看到拖拽組件的樣式。混入方法使用hoc，增強組件的一個方法。詳見圖5所示。

圖5

四：小結

本章節分析了飛碼畫布在精准定位、分層設計、非同步組件、拖拽四個方面的設計。飛碼的目標是：便捷、穩健、0測試，使前端web單頁面快速投產。感謝產品同學和服務端同學的大力支持。

作者：京東科技 王光輝

來源：京東雲開發者社區 轉載請註明來源