前端开发配置化方案

前端开发配置化方案徐辛承

2017.05SELF

INTRODUCTION徐辛承百度外卖高级前端工程师2012年毕业于北京航空航天大学（本科-软件工程）2012年3月加入人人网人人小站2013年10月加入百度网址导航事业部2016年4月加入百度外卖用户产品部1CONTENT234内部平台开发中的痛点页面配置平台Blocks平台核心设计平台现状和规划PART

1内部平台开发中的痛点内部平台是什么？举个栗子服务端存储数据内部平台服务端存储数据商户管理商品管理营销活动运营资源用户增长数据统计⋯⋯重复工作多！以banner配置为例列表页（所有banner配置的列表）新建页（新建某banner配置）详情页（展示某banner配置）日志页（记录操作日志）⋯⋯页面以banner配置为例表单（输入框、单选、多选等）表格（数据展示、翻页等）各类按钮弹框（对话框、提示框等）⋯⋯功能页面功能相似度高，重复工作较多基础页面搭建主要靠复制粘贴多人开发，代码风格统一困难我们发现⋯⋯需要平台来解决这些问题快速生成页面方案百度H5优点：拖拽+设置生成页面组件为最小单位，组件库丰富动画功能缺点：内部平台的交互无法支持组件不能拓展所有角色拖拽界面易于使用我们对平台的要求熟悉的技术栈可扩展性强模块拆分详细丰富的组件库交互的配置自定义拓展脚本配置化生成页面简单100%可维护性BlocksPART

2页面配置平台Blocks一套通过拖拽+配置生成页面的系统以组件为最小单位拖拽形式的页面画布支持组件添加和拓展支持自定义扩展脚本基于vue2.0

开发什么是BlocksBlocks架构图页面配置模块组件列表组件画布组件设置表单脚本配置模块脚本配置自定义扩展脚本页面渲染引擎配置文件解析渲染DOM加载脚本通过拖拽+设置的方式生成配置文件组件列表页面画布设置组件属性输出为config.js同时会在mapConfig.js里预留事件钩子页面配置模块在JSON

文件里开发扩展脚本组件事件的拓展页面整体交互开发输出为mapConfig.js脚本配置模块通过JSON配置文件生成页面解析组件的配置和层级关系解析配置文件里的自定义扩展脚本渲染页面页面渲染引擎核心整体使用流程PART

3平台核心设计核心思想JSONWeb

Page核心思想Config.jsDom结构Web

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

PageMapConfig.js页面渲染构造模板构造Virtual

Dom

TreeVirtualDom

Tree结构为object基于Virtual

Dom的实现，拓展性强为什么这么做每一个节点Tag节点名称Data节点属性等Children该节点的所有子节点整个Virtual

Dom

Tree深度优先遍历核心思想Config.jsWeb

PageMapConfig.js29MVCModel<=>View没有框架实现，需要通过ControllerModel<=>View间交互非常多导致的问题：Controller开发效率低下容易变得臃肿和难以维护数据模型Js脚本DOM原来的开发方式状态管理模式：state，驱动应用的数据源；view，以声明方式将state映射到视图；actions，响应在view上的用户输入导致的状态变化。脚本配置Vuex专为Vue.js应用程序开发的状态管理模式集中管理状态以相应的规则保证状态以一种可预测的方式发生变化脚本配置Vuex.store：StateGettersMutationsActionsVuexVuex辅助函数：mapStatemapGettersmapMutationsmapActions脚本配置事件钩子Input组件Label组件datahockClickhockBlurhockClickdata组件拓展MergeExtend脚本配置渲染引擎架构图Vuex.map…getComponentsCloneDeep渲染引擎Config.jsmapConfig.jsactionsgettersstatecreateVnodemergeOptionsmutactionsVirtualDomRenderFunctionstateactionsActual

DomcreateTrackdependencies如何生成这两份配置文件页面配置模块脚本配置模块页面配置模块组件列表监听drag事件，在页面画布中渲染页面画布点击画布组件，组件设置加载对应的配置页面画布改变属性，改变Virtual

Dom，渲染画布区域对通用组件库和业务组件做封装组件的引入Page

ConfigerBlocks

Componentsindex.vue

settings.jsELement

XCUI

业务组件 业务组件index.vue渲染在画布和页面中setting.js组件设置表单组件的引入Vuex.store的开发组件内部事件扩展mergeExtend输出为配置文件mapConfig.js未来会增加常规事件的可视化配置固定组件属性，可以约束RD接口规范脚本配置模块整体架构图Web

PagePage

ConfigScriptConfigConfig.jsmapConfig.jsrenderVuex.map…mergeExtendscreateEngine.jsPART

4平台现状和规划过去接口无规范每人代码风格不同，代码质量低所有的