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

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

2017.05SELF

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

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

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

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

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

3平臺核心設(shè)計核心思想JSONWeb

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

PageMapConfig.js頁面交互核心思想Config.jsWeb

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

Dom

TreeVirtualDom

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

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

Dom

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

PageMapConfig.js29MVCModel<=>View沒有框架實現(xiàn)，需要通過ControllerModel<=>View間交互非常多導(dǎo)致的問題：Controller開發(fā)效率低下容易變得臃腫和難以維護數(shù)據(jù)模型Js腳本DOM原來的開發(fā)方式狀態(tài)管理模式：state，驅(qū)動應(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ù)測的方式發(fā)生變化腳本配置Vuex.store：StateGettersMutationsActionsVuexVuex輔助函數(shù)：mapStatemapGettersmapMutationsmapActions腳本配置事件鉤子Input組件Label組件datahockClickhockBlurhockClickdata組件拓展MergeExtend腳本配置渲染引擎架構(gòu)圖Vuex.map…getComponentsCloneDeep渲染引擎Config.jsmapConfig.jsactionsgettersstatecreateVnodemergeOptionsmutactionsVirtualDomRenderFunctionstateactionsActual

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

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

ConfigerBlocks

Componentsindex.vue

settings.jsELement

XCUI

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

PagePage

ConfigScriptConfigConfig.jsmapConfig.jsrenderVuex.map…mergeExtendscreateEngine.jsPART

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