簡介
本章節從精準定位、分層設計、異步組件、拖拽四個方面分析飛碼畫布設計。
一、精準定位設計
飛碼畫布是一個套件，可對外提供畫布能力。精準定位有兩種情況，一是目標組件無子組件，而是目標組件有子組件。
無子組件：目標組件分爲支持與不支持放子組件兩種情況。
有子組件：鼠標相對於子組件（目標組件）對角線位置。詳見圖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單頁面快速投產。感謝產品同學和服務端同學的大力支持。
作者：京東科技 王光輝
來源：京東雲開發者社區 轉載請註明來源