vue.js在前端服务化上的探索与实践.docx

Vue.js 在前端服务化上的实践与探索张?／饿了么?前端?我介绍10 年 JavaScript 经验专职写了 5 年的前端 组件架构与机动组1.案例1：营销??的服务化2.案例23.?些经验4.?个探索分会场CMSBanner市场 运营 设计师活动切图更精细化的营销??主会场上线流程Banner视觉稿市场 运营 产品 设计师 前端活动 线框图线上链接营销??的组件化Vue Component TreeStage Banner TabPageImageShopListFoodList营销?? JSON 配置banner: {hash: 2067b8faa8820e6e9a08984, loading: e87ab08dd8ac2b4fbae3b9, width: 750,height: 1024 },share: {title: ?“?”光不分离,text: 悠闲下午茶，共度?“?”光, image_hash: c5616ff0d38c17e418c}营销?? JSON 配置(cont.)tabs: [{id: name: 惠??,normal_hash: 0caa3f3804517, activated_hash: 2666026a7793},{id: name: 缤纷选,normal_hash: 2d17ef14c21e14, activated_hash: 7ecd917192581}]营销?? JSON 编辑器App Builder上线后效果??上线周期由 3 ~ 5 天 = 10 分钟上线??数量：1000%+?版营销??基本淘汰App Builder 架构App 内CDNOSS营销?AppAppBuilderBuilder前端后端App Builder ?成的??结构MetaCSS??配置Browser polyfills依赖 JavaScript插件 JavaScript??配置动态渲染组件插件中?1.案例1：营销??的服务化2.案例2：Banner 的服务化3. ?些经验4.?个探索BannerBanner市场 运营 设计师活动设计 切图?户设计师1.?成的 Banner 需要有设计1.简单易?，快速?成感：字体、字号、背景不能2.需要多种?格选择随意更改2.?成的 Banner 需要符合设3.需要?次?成?套 Banner计规范业务模型主元素?案背景模板编辑器模板?成器 编辑器 定义 Banner 模编辑可变量板 ?成图?前端?Canvas ?成 渲染器 渲染 BannerAppBuilderBanner市场运营活动DAS 设计师模板1.案例1：营销??的服务化2.案例2：Banner 的服务化3.?些经验4.?个探索服务化的流程发现套路化的前端??主动去了解业务流程，找到可优化的点多?沟通，确认可落地定?案、出计划、上线不断迭代，优化流程、?户体验踩过的?些坑追求功能多?全服务化不等于零成本，会有客服成本追求功能上的灵活，忽视?户使??槛优化交互视觉，不如降低?户出错概率1.案例1：营销??的服务化2.案例2：Banner 的服务化3.?些经验4.通?可视化?档编辑器的探索开发编辑器的痛点开发成本?：App Builder 上线?个?左右业务模型不同：?类业务就要开发?个编辑器代码?法复?：开发?个新的编辑器需要从头开始共同点?编辑器的输?是结构化(树状或列表结构)的?档??档有多个状态：常?的是编辑态和展现态??档的展现态的种类?较多：Web、图?等框架层提供功能序列化功能：?档的保存和载?编辑功能：节点的增删、节点属性的修改撤销功能：节点增删、属性修改的 Undo、Redo节点的选择和即时编辑：选中后可以进? Resize、 Move 等操作?档格式[{tagName: star, left: 100,top: 100, width: 100, height: 100}, {tagName: arrow, left: 300,top: 300, width: 100, height: 100}]ModelEditor加载保存?档：serialize、loadUndo / Redo：undo、redo添加节点：appendNode删除节点：removeNode设置节点属性：setAttrUndo / RedoremoveNodeappendNodesetAttrUndo StackCommandCommandRedo StackCommandCommandCommandCommandCommandCommandAppendCommandexport default class AppendCommand extends Command { exe