朴实前行--模块化重构之旅刘畅临.ppt

,朴实前行,模块化重构之旅,技术中心-网站研发部-前端 报告人：刘畅临,目录,第一部分 背景,第二部分 解决方案,第三部分 总结与展望,第一部分 背景,1.现有架构,1.1.自动化构建工具,Closure Compiler、cssmin、imagemin,第一部分 背景,1.现有架构,1.2.代码,include,共用,业务,通用组件,业务脚本,第一部分 背景,2.问题,大,第一部分 背景,2.问题,重复,依赖层次不清晰,内容规划欠妥,乱,第一部分 背景,2.问题,开发环境复杂,用例生成步骤繁琐,我们在这里,杂,第三部分 总结与展望,第二部分 解决方案,第一部分 背景,第二部分 解决方案,使用新的高大上的框架,第二部分 解决方案,不用怂！就是干！,为何忽然在此出现=_=!,Why not?,1) 学习成本、项目风险,2) 没有充分利用好现有工具,第二部分 解决方案,需求s,前面那谁！别磨蹭！快走，赶着回家写代码呢！,3.乱明确代码间的层次关系,2.大文件瘦身,1.按时、高质量地完成项目,我们的目标,4.杂成为聪明的瞎子,第二部分 解决方案,行动,1. html,回到属于你的地方,按功能分拆模块,我只在乎你,简化模板内部逻辑,提前处理无法简化的逻辑,通过id、class与js耦合,第二部分 解决方案,行动,2. css,使用stylus重新规划样式代码,公共,布局,工具,通用模块,业务线,模块1、2、3,特殊工具、元件,元件,组合,重置,继承,第二部分 解决方案,行动,2. css,引入模块状态类,手术前：,手术后：,js：,css：,第二部分 解决方案,行动,3. js,基础,基础库(jQuery),工具（Loader、Listener、Cookie、Storage）,UI组件（Dropdown、Dialog、Switchable）,模块组织规范,业务,通用业务逻辑 （BO）,通用业务组件（含UI）,业务模块,应用,购物袋,订单结算,收银台,基础架构,第二部分 解决方案,行动,3. js,M,维护本地数据,监听动作变更事件,V,Dom Event Handler,Template,php+html+artTemplate,模块组织规范,维护视图数据,发起动作变更事件,调用api,Listener,View交互,Dom Event,Render,调用业务组件,调用业务逻辑,监听数据变更事件 （本模块）,发起数据变更事件,监听数据变更事件 （跨模块）,第二部分 解决方案,行动,4. 基于grunt，弄一个东西，摆脱对环境、数据的依赖,1) 建立url配置（类型：模板、api）,2) 根据约定好的接口格式，生成对应用例（php array、json）,3) url与用例绑定，访问模拟页面,左手写代码 右手写诗的浪漫前端,数据,敬请期待,一场史无前例的发布会,N年后可能有的,目录,第一部分 背景,第三部分 总结与展望,第二部分 解决方案,第三部分 总结与展望,1.总结,工程师首要的工作是按时、高质量地完成项目,代码重构引入新框架，用好当前的工具框架也可能带来代码质量的飞跃,前后端分离也可以很简单,2.展望,在闲暇中学习新工具、新框架,实现更nb的、与工具融合的模块化,完善FeDP，提高生