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