拥翠-04-前端复杂应用构建技术探索实践-潘征

分享⼈：百度FEX前端技术团队(潘征)关于FEX•百度最早的前端团队队成员，⽬前随团队就职于百度云向•百度云建站⽅向产品，前端复杂应•开源项⽬百度脑图早期研发⼯程师百度H5-在线移动营销⻚制作⼯具可独⽴执⾏||可被浏览的最终产物可独⽴执⾏||可被浏览的最终产物结构化的信息可视化编辑节⾯同步结构化的信息可视化编辑节⾯创作者打打包程序使⽤/浏览者今天要讲的内容：如何开发⼀个跑在浏览器⾥的软件百度脑图-在线思维导图编辑⼯具编辑器(将配置⽂件解析为可编辑状态)读取渲染运⾏时框架 编辑器(将配置⽂件解析为可编辑状态)读取渲染运⾏时框架 读取渲染云云端存储配置⽂配置⽂件 (通常是json格式)前端复杂应⽤虽然功能各异，但是最基础的结构都是类似的(有章可循)以这⼏个⼤块为基准，进⾏计划/调研编辑编辑器界⾯元素之间的状态同步⽅案 (主流：事件驱动、数据驱动) 将可视化界⾯的内容变化同步回数据添加/删除组件的指令设计更改组件属性的⽅式数据存储⽅案 (数据主体和资源⽂件)组件基础数据结构设计主体数据结构设计运⾏时框运⾏时框架编辑状态与运⾏时状态的组件渲染程序复⽤问题(⼀致or区分？)基础依赖框架的调研和选型明确最终产出物的形态以百度脑图为例，讲讲图示类复杂应⽤的开发 kityMinderkityMinder-editorkityMinderkityMinder-core思维导图视图部分fifileSystem账号、⽂件管理系统利⽤SVG绘制整个编辑区域⼀个SVG元素kityMinder-corecore基础功能iniinitexecCommandEventdataImportSelectlayoutlayouts布局规则bbtreefiletreefishbonemindtianpanmodule构成思维导图的各个部件nodnodehhyperlinkppriorityprotocol各种数据格式导出pngtxtmarkdownJsonModule能函数，并将其以Command的⽅式暴露给Core思维导图节点左侧的优先级图标connectconnectnodemodule它们之间存在相互影响关系•当节点创建时，相应的connect被创建•当节点删除时，相应的connect被删除eg：connect(连线)和node(节点)之间的状态同步利⽤事件向全局⼴播变更每个模块在定义时枚举⾃身期望响应的事件以及相应的处理函数connectconnect模块响应事件并进⾏相应处理实现1.把节点(包含节点中的内容)画出来2.根据布局规则中的实现来调整当前节点及其他节点的位置不同布局规则下新增思维导图节点时的不同表现templatetemplate:default配置数据中的template字段templatetemplate:filetree不同布局的思维导图数据主体是相同的：配置数据仅包含能够还原出可视化布局的关键信息布局规则的实现：编辑器部分不同的布局策略实现每个布局策略会暴露⾃⼰的doLayout函数将思维导图节点逐个“挪动”到正确位置发散：流程图、结构图等需求快捷键⼀个简单的例⼦：移除链接功能的实现通过可视化界⾯调⽤kityMinder-core提供的Command来实现操作功能 以百度H5为例，讲讲创作类复杂应⽤的开发 DataData(数据库)Data(静态集群) (包括图⽚、⾳视频、相册等⻚⾯构成元素)制作完成发布的⻚⾯外沿功能外沿功能模板市场管理员审核功能帮助⽂档PSD⾃动切图服务微信签名服务表单数据提交服务基于Angular实现的数据驱动编辑器区域动画时间线属性⾯板编辑器由四个⼤块构成需要同时更新这些区域注意这⾥的缩略图注意这⾥的缩略图注注意这⾥的坐标百度脑图中，当响应到⽤户输⼊后执⾏commandstep1：修改datastep2百度脑图中，当响应到⽤户输⼊后执⾏commandstep1：修改datastep2：执⾏render⾏为step3：派发事件通知全局更改区域属性⾯属性⾯板最最终发布的⻚⾯构成⻚⾯解析相关代码main.css⻚⾯相关cssdata.js裁剪打包后的字体万能脚本(未对外)mainmain.cssdatadata.jsdata编辑器数据绑定示意图dataConConfigspagescurrentpageConfigsConponentsComponentComponentpagevendorvendor.css组件相关的css样式schemaschema.json组件属性配置⽤以设定默认值以及⽣成右侧属性⾯板组件⽣成及渲染的逻辑代码schema在编辑器中的表现编辑⾯板编辑器中的呈现对应的DOM结构编辑器中的呈现对应的DOM结构组件的层次结构⽤于编辑⾏为