簡介

飛碼是京東科技平臺研發(fā)部研發(fā)的低代碼產(chǎn)品，可使?fàn)I銷運營域下web頁面快速搭建。本文將從三個方面來講解如何便捷配置出頁面，第一部分從數(shù)據(jù)、事件、業(yè)務(wù)支持三個方面進行分析，第二部分從模板與頁面收藏與升級、頁面UI結(jié)構(gòu)、畫布功能三個方面進行分析，第三部分從監(jiān)控、頁面配置、頁面數(shù)據(jù)導(dǎo)入導(dǎo)出以及其他能力四個方面進行分析。

一、第一部分：數(shù)據(jù)、事件、業(yè)務(wù)支持

1、數(shù)據(jù)設(shè)計

飛碼LowCode前端技術(shù)（一）種對數(shù)據(jù)結(jié)構(gòu)進行了分析，飛碼是數(shù)據(jù)驅(qū)動+事件驅(qū)動，在編輯態(tài)配置區(qū)域需要頁面中各種數(shù)據(jù)（接口出參、組件出參、頁面入?yún)?、業(yè)務(wù)邏輯數(shù)據(jù)）。該部分僅說明飛碼如何實現(xiàn)配置邏輯與規(guī)則的，如何實現(xiàn)數(shù)據(jù)驅(qū)動會在后續(xù)小節(jié)說明。

數(shù)據(jù)復(fù)用：一個組件的入?yún)⑹枪潭ㄖ?，例如select1組件list是一個固定值1，select2組件list也是一個固定值1，這個就需要數(shù)據(jù)的復(fù)用能力。飛碼解決方案詳見圖1

圖1

數(shù)據(jù)配置：數(shù)據(jù)配置包含了數(shù)據(jù)A與數(shù)據(jù)B之間是賦值關(guān)系、邏輯判斷關(guān)系，還是組合關(guān)系。結(jié)合業(yè)務(wù)實際情況，飛碼歸納常見的數(shù)據(jù)配置情況。詳見圖2

圖2

對任何一個可配置的組件屬性值，均可以通過全局?jǐn)?shù)據(jù)視角進行配置。數(shù)據(jù)源是出參，設(shè)置數(shù)據(jù)是給某個組件或Api，彈框等設(shè)置數(shù)據(jù)。當(dāng)我們需要處理復(fù)雜的業(yè)績時，可以通過處理函數(shù)進行快速處理。飛碼中的函數(shù)是常見的js函數(shù)，飛碼也內(nèi)置了form表單的校驗函數(shù)，form校驗規(guī)則也可以進行復(fù)用。該部分在事件小節(jié)說明。飛碼支持用全局視角看頁面的所有數(shù)據(jù)情況以及流轉(zhuǎn)情況。

數(shù)據(jù)導(dǎo)入：頁面配置過程需要看到頁面中所有數(shù)據(jù)字段及數(shù)據(jù)層級結(jié)構(gòu)，飛碼認(rèn)為有四種方案可以選擇。一是對組件進行一一配置；二是先配置頁面之后在組件中進行選擇；三是通過組件id自動生成組件關(guān)聯(lián)屬性，之后與接口進行一一配對；四是組件與頁面均可以配置，配置之后具有一致性。飛碼使用方案四，可以組件層面進行關(guān)聯(lián)字段配置，也可以頁面進行配置。在實際搭建頁面的情況下，發(fā)現(xiàn)頁面級別的導(dǎo)入數(shù)據(jù)更為便捷。飛碼目前也支持j-api、bff與組件關(guān)聯(lián)之后進行導(dǎo)入能力。頁面級別的數(shù)據(jù)字段導(dǎo)入詳見圖3

圖3

結(jié)合j-api可以通過接口數(shù)據(jù)直接生成頁面的一部分，并實現(xiàn)組件字段與頁面字段一致性。詳見圖4

圖4

2、事件設(shè)計

飛碼對事件進行了分類，分為導(dǎo)航、組件顯示&隱藏&禁用、數(shù)據(jù)、彈框&toast、操作、form操作、其他。如圖5所示為事件編排區(qū)域。飛碼中事件也支持配置，圖5右側(cè)區(qū)域為單事件節(jié)點的實例配置。每一個事件通過JSON配置實現(xiàn)（飛碼lite版配置），支持動態(tài)加載額外新增事件。

圖5

飛碼對常見事件進行提取歸類，枚舉如圖5中左側(cè)區(qū)域。通過編排方式進行業(yè)務(wù)配置。

事件配置：組件、頁面生命周期、其他事件調(diào)用情況會使用事件。創(chuàng)建事件之后飛碼會在緩存中記錄事件id以及事件名稱與相關(guān)的事件編排。研發(fā)可以在組件事件、頁面事件、其他事件中進行配置。飛碼編輯態(tài)事件流程如圖6所示。

圖6

事件與數(shù)據(jù)打通：如圖2所示，飛碼支持在事件中進行數(shù)據(jù)的配置，例如messag中（如圖7），點擊js編輯器會喚醒圖2，之后可以配置messag的提示語，提示語來自接口，飛碼使用$api開頭，接口id為其屬性值，之后一級一級找錯誤信息即可。

圖7

事件的復(fù)用：飛碼支持事件A，調(diào)用事件B，事件B調(diào)用事件C。也支持事件A根據(jù)配置的邏輯規(guī)則調(diào)用自己。

事件的串行與并行：飛碼事件編排中任何一個節(jié)點的輸出點支持作為多個事件節(jié)點的輸入點。遇到多個事件同時觸發(fā)的時候，可以實現(xiàn)事件的并行與串行執(zhí)行。
問題：事件編排錯誤會導(dǎo)致事件死循環(huán)怎么解？

事件死循環(huán)一般是由于條件邏輯書寫錯誤導(dǎo)致的，ProCode開發(fā)過程中也會遇到類似情況，方法A調(diào)用了方法B，方法B又調(diào)用了方法A，一直循環(huán)調(diào)用。常規(guī)配置導(dǎo)致的死循環(huán)飛碼FMHelper會幫助監(jiān)測到，當(dāng)研發(fā)書寫js導(dǎo)致的死循環(huán)飛碼運行態(tài)FMHelper會最大能力監(jiān)測，由于運行態(tài)數(shù)據(jù)未知性，部分死循環(huán)監(jiān)測不到。該部分后續(xù)會加強邏輯處理。

3、業(yè)務(wù)支持設(shè)計

飛碼的業(yè)務(wù)支持中，有權(quán)限與埋點。為了便捷研發(fā)搭建頁面飛碼增加了常見函數(shù)支持。
權(quán)限設(shè)計：已組件與頁面維度，權(quán)限可以分為不可見與不可交互兩種情況。A用戶沒有權(quán)限看到a組件（或者頁面），B用戶沒有權(quán)限對a組件（或者頁面）進行交互，C用戶可以看到a組件（或者頁面）并可以交互。
飛碼權(quán)限依賴京東科技統(tǒng)一權(quán)限系統(tǒng)，實現(xiàn)流程如圖8所示。

圖8

考慮安全節(jié)省帶寬，對隱藏頁面或者組件，飛碼服務(wù)不會下發(fā)相應(yīng)的DSL到飛碼的運行態(tài)。
埋點設(shè)計：接入公司內(nèi)部奇點平臺，飛碼對埋點進行分類。分為組件類型埋點（含曝光），與事件類型埋點。流程詳見圖9

圖9

飛碼對組件，頁面，事件的埋點方案，是通過配置化實現(xiàn)的。大大降低了理解成本與跨平臺配置成本。

函數(shù)便捷配置能力：上一個章節(jié)中提到飛碼官方提供的常見函數(shù)，常見函數(shù)處理枚舉情況。該部分主要便捷研發(fā)書寫js函數(shù)。

問題：函數(shù)是不是具備動態(tài)擴展能力？

函數(shù)與組件不太一樣，常見的函數(shù)已全部枚舉到飛碼。飛碼之前思考過通過飛碼后管動態(tài)下發(fā)函數(shù)能力，發(fā)現(xiàn)實際使用場景并不多。目前飛碼不支持動態(tài)擴展函數(shù)能力。后續(xù)依據(jù)情況是否增加函數(shù)動態(tài)擴展能力。

小結(jié)

本小節(jié)分析了飛碼如何便捷配置出頁面，分別對數(shù)據(jù)、事件、業(yè)務(wù)支持方面進行了詳細介紹。數(shù)據(jù)配置、事件配置均可以通過全局視角看到整個頁面相關(guān)數(shù)據(jù)結(jié)構(gòu)與邏輯結(jié)構(gòu)。業(yè)務(wù)支持方面最大限度的實現(xiàn)配置化，同時也支持函數(shù)配置，大大減少了研發(fā)書寫js時間成本。

第二部分：模板與頁面收藏與升級、頁面UI結(jié)構(gòu)、畫布功能

1、模板與頁面收藏升級設(shè)計

模板收藏與升級：在飛碼LowCode前端技術(shù)（二）章節(jié)中對模板的收藏進行了說明。飛碼模板（包括官方模板）可以進行升級，編輯。飛碼對模板分類以及升級流程方案詳見圖10

圖10

當(dāng)用戶收藏模板之后，可以在飛碼管理端進行編輯，編輯之后飛碼服務(wù)端會更新對應(yīng)的模板DSL。飛碼沒有對模板的版本進行管理，模板的使用是一個快照，當(dāng)研發(fā)用戶拖動模板到編輯頁面的時候，會對模板中組件id進行更新。飛碼的模板DSL與飛碼頁面DSL保持一致，詳見飛碼LowCode前端技術(shù)（一）。

頁面收藏與升級：飛碼的頁面收藏能力在飛碼后管進行操作，飛碼頁面的收藏是一個快照。搭建頁面期間會遇到很多類似的頁面，這樣就可以通過頁面收藏，之后在進行編輯。頁面收藏邏輯詳見圖2

圖11

頁面收藏之后在使用頁面的時候會創(chuàng)建一個頁面快照，生成一個新頁面id。頁面收藏，個人頁面收藏同時也是快手的收藏。當(dāng)官方頁面、個人頁面變化的時候，之前收藏的頁面不會發(fā)生變化。

問題：是不是對模板與頁面增加版本號？之后根據(jù)版本號進行選擇性配置。

飛碼之前考慮過模板與官方頁面都有版本號進行控制，在使用階段發(fā)現(xiàn)版本號的選擇與理解會增加用戶心智負(fù)擔(dān)。在web頁面中復(fù)用的模板與頁面并不太多，飛碼暫時沒有模板與頁面模板版本號，后續(xù)業(yè)務(wù)根據(jù)情況考慮是否增加。

2、頁面UI結(jié)構(gòu)設(shè)計

頁面UI結(jié)構(gòu)，飛碼用樹的形式實時展示。當(dāng)畫布是頁面級編排的時候，UI結(jié)構(gòu)是頁面級別的。當(dāng)畫布是局部視圖（開啟另外一個視圖，實現(xiàn)局部放大能力，實現(xiàn)視圖的便捷配置）時候，UI結(jié)構(gòu)是局部視圖級別的?？梢岳斫鉃閁I結(jié)構(gòu)與當(dāng)前畫布中組件結(jié)構(gòu)一一對應(yīng)。如圖12

圖12

頁面UI數(shù)據(jù)結(jié)構(gòu)在[飛碼LowCode前端技術(shù)（一）]中對數(shù)據(jù)結(jié)構(gòu)進行了分析。飛碼在編輯態(tài)中數(shù)據(jù)結(jié)構(gòu)進行了區(qū)分，分為頁面數(shù)據(jù)結(jié)構(gòu)、局部視圖數(shù)據(jù)結(jié)構(gòu)。局部視圖數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)是緩存數(shù)據(jù)，使用detailViewCanvas進行緩存（如何與頁面數(shù)據(jù)結(jié)構(gòu)結(jié)合，在畫布小節(jié)說明）。UI數(shù)據(jù)結(jié)構(gòu)整體設(shè)計詳見圖13

圖13

編輯態(tài)的頁面UI數(shù)據(jù)結(jié)構(gòu)與運行態(tài)（投產(chǎn)）是一致的。

3、畫布設(shè)計

畫布的詳細設(shè)計與技術(shù)實現(xiàn)詳見之后的章節(jié)，該小節(jié)側(cè)重描述畫布功能以及局部視圖如何與主視圖結(jié)合的能力。

支持精準(zhǔn)拖拽：詳見圖14

圖14

飛碼組件在布局的時候?qū)τ谀繕?biāo)組件進行上、右、下、左四個區(qū)域區(qū)分。實時監(jiān)控鼠標(biāo)位置，之后對目標(biāo)組件進行判斷。若支持子組件的組件中沒有組件，例如div，放入第一個組件的時候會顯示“里”。詳見圖15所示

圖15

組件的拖拽會實時監(jiān)控目標(biāo)組件（包括是不是支持內(nèi)部增加組件），鼠標(biāo)位置。具體算法邏輯會在后續(xù)章節(jié)中進行說明。

上下移動復(fù)制刪除：

圖15可以看出，飛碼畫布會對選中組件實時監(jiān)控父級與兄弟組件，進而確定是否支持上下移動。飛碼組件復(fù)制是對組件以及子組件完全復(fù)制，包括子組件中配置的事件或者數(shù)據(jù)。

特定組件擴展特定能力：

飛碼認(rèn)為form組件，table組件，為復(fù)雜類型組件。飛碼認(rèn)為復(fù)雜組件的配置便捷性需要挨著組件區(qū)域最近的地方，最大能力提升便捷性。

對form組件，經(jīng)常配置內(nèi)部組件布局。詳見圖16

圖16

對table組件，經(jīng)常配置內(nèi)部組件布局。詳見圖17

圖17

飛碼對table中的組件進行了列的拖拽排序，prop與labe的快速設(shè)置，快速增加一列能力。同時飛碼對table組件與右側(cè)配置表單進行了綁定，實現(xiàn)快速定位能力。

問題：飛碼對組件便捷區(qū)3個點(…)是否支持遠程組件下發(fā)的時候一起下發(fā)對應(yīng)能力？

飛碼對該部分能力還沒有開放，目前僅支持官方組件的能力擴展。后續(xù)根據(jù)實際業(yè)務(wù)場景考慮是否開放該部分能力。

復(fù)雜區(qū)域配置應(yīng)支持局部畫布：

圖16中el-table-column區(qū)域配置多個按鈕的時候，點擊該區(qū)域內(nèi)的小方塊，會喚起局部視圖。局部視圖中與頁面畫布功能完全一致。可以隨意對組件進行組合。在[飛碼LowCode前端技術(shù)（一）]中介紹了飛碼彈框是通過一個數(shù)組進行管理的。通過彈框的數(shù)據(jù)結(jié)構(gòu)可以看出，每一個彈框是一個局部視圖，通過事件喚起彈框。

局部視圖如何與主視圖結(jié)合：

飛碼將局部視圖劃分為兩種：一是彈框類（包含Dialog，drawer），二是組件類（目前包含table、tabs）

第一類：彈框是通過事件觸發(fā)的，于是飛碼事件編排中選擇對應(yīng)的彈框即可。在數(shù)據(jù)結(jié)構(gòu)中彈框與事件有關(guān)，與頁面無關(guān)。

第二類：該部分在頁面或者彈框內(nèi)，與常規(guī)數(shù)據(jù)結(jié)構(gòu)一樣，通過children字段表示。

小結(jié)

本小節(jié)分析了飛碼如何便捷配置出頁面-3，分別對模板與頁面收藏與升級、頁面UI結(jié)構(gòu)、畫布功能三個方面進行了詳細介紹。飛碼的UI結(jié)構(gòu)設(shè)計、畫布設(shè)計符合常規(guī)設(shè)計模式，對彈框進行了統(tǒng)一管理。

第三部分：監(jiān)控、頁面配置、頁面數(shù)據(jù)導(dǎo)入導(dǎo)出以及其他能力

1、監(jiān)控（FMHelper）設(shè)計

飛碼監(jiān)控需要做兩件事情，一是編輯態(tài)怎么幫助搭建人員快速定位問題并給出可能出現(xiàn)的問題點，二是在運行態(tài)最大能力定位問題（該部分還在研發(fā)中）。本節(jié)僅講述編輯態(tài)中如何設(shè)計與定位問題的。飛碼對FMHelper劃分四部分分別是頁面、彈框、事件、API。詳見圖18

圖18

FMHelper在編輯態(tài)時會對整個頁面的DSL進行監(jiān)測，依據(jù)搭建中常見錯誤信息進行匯總分類，并形成配置表。配置表部分會在下一章節(jié)進行說明。飛碼將問題分為error與warn兩個級別。詳見圖19

圖19

飛碼依據(jù)頁面中所有配置項以及事件鏈路關(guān)系，對于大部分問題都可以定位到錯誤配置位置，點擊查看即可。

2、頁面配置設(shè)計

飛碼頁面配置分為樣式、事件、數(shù)據(jù)、配置共4部分組成。詳見圖20所示。

圖20

事件：頁面事件與vue頁面生命周期函數(shù)一一對應(yīng)，飛碼同時支持在一個生命周期函數(shù)中配置多個事件。選擇相關(guān)的事件，即可在運行態(tài)的時候調(diào)用相關(guān)事件。

數(shù)據(jù)：數(shù)據(jù)分為入?yún)⑴渲?，出參配置。入?yún)⑴渲玫臅r候配置一個schema或者配置一些鍵值對，頁面在運行態(tài)的時候會實時監(jiān)控入?yún)?shù)的變化，同時頁面中的其他組件存在依賴關(guān)系的也會發(fā)生先關(guān)變化。出參配置這部分能力已轉(zhuǎn)移到事件編排，在頁面配置區(qū)域目前禁用狀態(tài)，后續(xù)飛碼會對其隱藏。詳見圖21。

圖21

飛碼頁面入?yún)⒂?種情況，一是通過飛碼對外提供的sdk，標(biāo)簽引入之后對inData進行設(shè)置。二是會取投放出去頁面的url中的參數(shù)。詳見圖22

圖22

配置：該區(qū)域是頁面業(yè)務(wù)型配置，包含整個頁面API的host，API返回正確的code碼，埋點與權(quán)限。詳見圖23所示

圖23

頁面在環(huán)境切換情況下，只需要在頁面配置->配置 進行相關(guān)配置即可。

3、頁面數(shù)據(jù)導(dǎo)入導(dǎo)出設(shè)計

測試環(huán)境、預(yù)發(fā)環(huán)境、線上環(huán)境對應(yīng)的服務(wù)是不一樣的。測試環(huán)境的數(shù)據(jù)無法同步到預(yù)發(fā)環(huán)境。測試環(huán)境調(diào)試好的頁面，如何在預(yù)發(fā)環(huán)境上快速上線？飛碼通過導(dǎo)出、導(dǎo)入能力實現(xiàn)頁面的快速復(fù)制能力。如圖24

圖24

導(dǎo)出：會對頁面整個數(shù)據(jù)結(jié)構(gòu)進行數(shù)據(jù)加工，去掉空字段，刪除事件編排中無用字段。

導(dǎo)入：與導(dǎo)出相反，會對整個導(dǎo)入的DSL數(shù)據(jù)結(jié)構(gòu)進行加工，增加必備字段，增加事件編排中必備字段。

4、其他能力設(shè)計

回退上一步：在實踐中發(fā)現(xiàn)畫布拖拽（組件移動、兄弟組件之間的布局等）之后并不是想要的效果，飛碼提供了一鍵回退能力，如圖7所示“畫布 上一步（4）“，飛碼僅支持回退5步操作。詳見圖25

圖25

問題：為什么僅支持5步回退？

搭建頁面期間畫布誤操作情況一般是1-2步，飛碼設(shè)計5步并沒有考慮回退太多步驟的情況，其中5也是配置的一個數(shù)字。可以修改，支持更多步。

歷史記錄：操作保存、預(yù)覽按鈕的時候，飛碼會記錄當(dāng)前頁面DSL信息，記錄在服務(wù)服務(wù)器。效果圖見圖26

圖26

點擊放大按鈕可以看到點擊保存、預(yù)覽按鈕時候的截圖。點擊“應(yīng)用到當(dāng)前頁面“，可以切換到之前的歷史版本。點擊”復(fù)制DSL“，可以復(fù)制歷史版本的DSL，之后開發(fā)其他頁面使用或者對DSL進行對比。

預(yù)覽：點擊“預(yù)覽“按鈕之后，即可對當(dāng)前頁面進行預(yù)覽，會跳轉(zhuǎn)到飛碼運行態(tài)頁面。目前飛碼FMHelper還沒有對不合格（配置有問題）的頁面進行攔截，飛碼對FMHelper定位是一個提示工具。隨著FMHelper能力變強，在智能監(jiān)測與校驗方面給頁面搭建賦能。

問題：飛碼測試環(huán)境預(yù)、發(fā)環(huán)境與線上環(huán)境在存量頁面中怎么對比DSL的區(qū)別？

測試環(huán)境服務(wù)器無法與預(yù)發(fā)、線上打通。飛碼目前支持預(yù)發(fā)環(huán)境與線上環(huán)境DSL的對比以及頁面配置對比，在預(yù)發(fā)環(huán)境調(diào)試好的頁面，在線上環(huán)境只需要同步即可。也可對同步的內(nèi)容進行編輯。

本小節(jié)分析了飛碼如何便捷配置出頁面-4，分別對監(jiān)控、頁面配置、頁面數(shù)據(jù)導(dǎo)入導(dǎo)出以及其他能力四個方面進行了詳細介紹。FMHelper是飛碼的一個輔助工具，幫助搭建人員快速定位問題、頁面配置目的是在運行環(huán)境不一致的情況下對變量參數(shù)進行快速設(shè)置，數(shù)據(jù)導(dǎo)入導(dǎo)出解決了環(huán)境數(shù)據(jù)不同步問題以及提供頁面快速復(fù)制能力。下章節(jié)介紹飛碼LowCode前端技術(shù)：如何便捷快速驗證實現(xiàn)投產(chǎn)及飛碼探索。

作者：京東科技 王光輝

來源：京東云開發(fā)者社區(qū) 轉(zhuǎn)載請注明來源文章來源地址http://www.zghlxwxcb.cn/news/detail-741797.html

到了這里，關(guān)于飛碼LowCode前端技術(shù)：如何便捷配置出頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！