本篇文章從數據中心，事件中心如何協議工作、不依賴環境對vue2.x、vue3.x都可以支持、投產頁面問題定位三個方面進行分析。

一、數據中心，事件中心設計

飛碼是數據驅動+事件驅動的產品，考慮到飛碼運行環境，飛碼自己封裝了store。

數據中心：在同一個頁面中可能存在多個飛碼標簽，飛碼通過實例化實現store。在接入飛碼的時候詳見圖1

圖1

在運行的時候，飛碼會對該部分創建一個實例。詳見圖2

圖2

數據中心會根據當前運行環境，借用不同技術棧底層能力，實現數據流轉。圖2中JSONSchema來自圖1中paasDSL或者通過頁面id獲取，其中頁面pageId優先順序最高。

事件中心：頁面生命周期函數與用戶操作的時候會觸發事件，事件可能會觸發其他事件。事件類型詳見飛碼[LowCode前端技術（三）]。飛碼事件通過實例化對象實現，事件被觸發的時候會創建一個事件實例eventCenter，編輯態事件產物eventId與事件中心相對應。有時會彈框消失的時候會觸發其他事件，其它事件持續執行任務。飛碼引入事件增強機制，對彈框消失的時候進行監控，並持續執行之前任務。詳見圖3

圖3

事件中心會觸發數據中心數據的改變，數據中心會觸發組件相關UI改變。之間關係詳見圖4，箭頭指向並不是每次都會發生，例如頁面生命周期函數不一定配置了事件，在頁面運行的時候若生命周期函數中沒有配置事件，則不會觸發事件中心。

圖4

二、不依賴環境設計

前端項目技術棧差異，目前主流的技術棧有vue（vue2.x，vue3.x），react。依據部門內部技術棧情況，飛碼支持vue2.x，vue3.x。詳見圖5

圖5

飛碼運行態的組件使用h函數進行開發，組件中對環境進行了判斷。每一個組件與數據中心關聯，數據中心通知組件的更新。組件的事件與事件中心關聯。以button為例，通過isV3()判斷當前運行環境是不是vue3進行適配。詳見圖6

圖6

飛碼對於複雜業務場景設計思路與電路圖設計一致，飛碼本身也是一種組件，飛碼支持嵌套自己。詳見圖7

圖7

問題：飛碼會支持react嗎？

會支持的，根據目前業務場景需求，對數據中心、事件中心增加react能力即可。目前模式不會發生變化的。

三、投產頁面問題定位

FMHelper在編輯態可對頁面眾多問題進行監測，當頁面預覽之後發現有問題，搭建人員需要有前端經驗才可以對問題進行定位之後在編輯態進行更改，達到預期效果。若不太瞭解前端知識的情況下快速定位並更正是飛碼探索方向之一。
飛碼持續在便捷、穩健、0測試方向探索。

四：小結

本章節分析了飛碼如何便捷快速驗證實現投產及飛碼探索，分別數據中心，事件中心如何協議工作、不依賴環境對vue2.x、vue3.x都可以支持、投產頁面問題定位三個方面進行了詳細介紹。下章節介紹[飛碼LowCode前端技術（七）]飛碼畫布技術介紹。

作者：京東科技 王光輝

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