前端開發(fā)配置化方案

前端開發(fā)配置化方案徐辛承

2017.05SELF

INTRODUCTION徐辛承百度外賣高級(jí)前端工程師2012年畢業(yè)于北京航空航天大學(xué)（本科-軟件工程）2012年3月加入人人網(wǎng)人人小站2013年10月加入百度網(wǎng)址導(dǎo)航事業(yè)部2016年4月加入百度外賣用戶產(chǎn)品部1CONTENT234內(nèi)部平臺(tái)開發(fā)中的痛點(diǎn)頁(yè)面配置平臺(tái)Blocks平臺(tái)核心設(shè)計(jì)平臺(tái)現(xiàn)狀和規(guī)劃PART

1內(nèi)部平臺(tái)開發(fā)中的痛點(diǎn)內(nèi)部平臺(tái)是什么？舉個(gè)栗子服務(wù)端存儲(chǔ)數(shù)據(jù)內(nèi)部平臺(tái)服務(wù)端存儲(chǔ)數(shù)據(jù)商戶管理商品管理營(yíng)銷活動(dòng)運(yùn)營(yíng)資源用戶增長(zhǎng)數(shù)據(jù)統(tǒng)計(jì)??重復(fù)工作多！以banner配置為例列表頁(yè)（所有banner配置的列表）新建頁(yè)（新建某banner配置）詳情頁(yè)（展示某banner配置）日志頁(yè)（記錄操作日志）??頁(yè)面以banner配置為例表單（輸入框、單選、多選等）表格（數(shù)據(jù)展示、翻頁(yè)等）各類按鈕彈框（對(duì)話框、提示框等）??功能頁(yè)面功能相似度高，重復(fù)工作較多基礎(chǔ)頁(yè)面搭建主要靠復(fù)制粘貼多人開發(fā)，代碼風(fēng)格統(tǒng)一困難我們發(fā)現(xiàn)??需要平臺(tái)來(lái)解決這些問(wèn)題快速生成頁(yè)面方案百度H5優(yōu)點(diǎn)：拖拽+設(shè)置生成頁(yè)面組件為最小單位，組件庫(kù)豐富動(dòng)畫功能缺點(diǎn)：內(nèi)部平臺(tái)的交互無(wú)法支持組件不能拓展所有角色拖拽界面易于使用我們對(duì)平臺(tái)的要求熟悉的技術(shù)棧可擴(kuò)展性強(qiáng)模塊拆分詳細(xì)豐富的組件庫(kù)交互的配置自定義拓展腳本配置化生成頁(yè)面簡(jiǎn)單100%可維護(hù)性BlocksPART

2頁(yè)面配置平臺(tái)Blocks一套通過(guò)拖拽+配置生成頁(yè)面的系統(tǒng)以組件為最小單位拖拽形式的頁(yè)面畫布支持組件添加和拓展支持自定義擴(kuò)展腳本基于vue2.0

開發(fā)什么是BlocksBlocks架構(gòu)圖頁(yè)面配置模塊組件列表組件畫布組件設(shè)置表單腳本配置模塊腳本配置自定義擴(kuò)展腳本頁(yè)面渲染引擎配置文件解析渲染DOM加載腳本通過(guò)拖拽+設(shè)置的方式生成配置文件組件列表頁(yè)面畫布設(shè)置組件屬性輸出為config.js同時(shí)會(huì)在mapConfig.js里預(yù)留事件鉤子頁(yè)面配置模塊在JSON

文件里開發(fā)擴(kuò)展腳本組件事件的拓展頁(yè)面整體交互開發(fā)輸出為mapConfig.js腳本配置模塊通過(guò)JSON配置文件生成頁(yè)面解析組件的配置和層級(jí)關(guān)系解析配置文件里的自定義擴(kuò)展腳本渲染頁(yè)面頁(yè)面渲染引擎核心整體使用流程PART

3平臺(tái)核心設(shè)計(jì)核心思想JSONWeb

Page核心思想Config.jsDom結(jié)構(gòu)Web

PageMapConfig.js頁(yè)面交互核心思想Config.jsWeb

PageMapConfig.js頁(yè)面渲染構(gòu)造模板構(gòu)造Virtual

Dom

TreeVirtualDom

Tree結(jié)構(gòu)為object基于Virtual

Dom的實(shí)現(xiàn)，拓展性強(qiáng)為什么這么做每一個(gè)節(jié)點(diǎn)Tag節(jié)點(diǎn)名稱Data節(jié)點(diǎn)屬性等Children該節(jié)點(diǎn)的所有子節(jié)點(diǎn)整個(gè)Virtual

Dom

Tree深度優(yōu)先遍歷核心思想Config.jsWeb

PageMapConfig.js29MVCModel<=>View沒有框架實(shí)現(xiàn)，需要通過(guò)ControllerModel<=>View間交互非常多導(dǎo)致的問(wèn)題：Controller開發(fā)效率低下容易變得臃腫和難以維護(hù)數(shù)據(jù)模型Js腳本DOM原來(lái)的開發(fā)方式狀態(tài)管理模式：state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；view，以聲明方式將state映射到視圖；actions，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化。腳本配置Vuex專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式集中管理狀態(tài)以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化腳本配置Vuex.store：StateGettersMutationsActionsVuexVuex輔助函數(shù)：mapStatemapGettersmapMutationsmapActions腳本配置事件鉤子Input組件Label組件datahockClickhockBlurhockClickdata組件拓展MergeExtend腳本配置渲染引擎架構(gòu)圖Vuex.map…getComponentsCloneDeep渲染引擎Config.jsmapConfig.jsactionsgettersstatecreateVnodemergeOptionsmutactionsVirtualDomRenderFunctionstateactionsActual

DomcreateTrackdependencies如何生成這兩份配置文件頁(yè)面配置模塊腳本配置模塊頁(yè)面配置模塊組件列表監(jiān)聽drag事件，在頁(yè)面畫布中渲染頁(yè)面畫布點(diǎn)擊畫布組件，組件設(shè)置加載對(duì)應(yīng)的配置頁(yè)面畫布改變屬性，改變Virtual

Dom，渲染畫布區(qū)域?qū)νㄓ媒M件庫(kù)和業(yè)務(wù)組件做封裝組件的引入Page

ConfigerBlocks

Componentsindex.vue

settings.jsELement

XCUI

業(yè)務(wù)組件 業(yè)務(wù)組件index.vue渲染在畫布和頁(yè)面中setting.js組件設(shè)置表單組件的引入Vuex.store的開發(fā)組件內(nèi)部事件擴(kuò)展mergeExtend輸出為配置文件mapConfig.js未來(lái)會(huì)增加常規(guī)事件的可視化配置固定組件屬性，可以約束RD接口規(guī)范腳本配置模塊整體架構(gòu)圖Web

PagePage

ConfigScriptConfigConfig.jsmapConfig.jsrenderVuex.map…mergeExtendscreateEngine.jsPART

4平臺(tái)現(xiàn)狀和規(guī)劃過(guò)去接口無(wú)規(guī)范每人代碼風(fēng)格不同，代碼質(zhì)量低所有的