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

* * 朴实前行 模块化重构之旅 技术中心-网站研发部-前端 报告人：刘畅临 目录 第一部分 背景 第二部分 解决方案 第三部分 总结与展望 第一部分 背景 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，提高生成用例的便捷性，拓展用户群体 做特卖哪家强？ 你问，我答 Thanks！ 技术中心-网站研发部-前端 报告人：刘畅临 新浪微博：@lcllao 按功能模块拆分html，模块内部尽可能只关心一个数据结构 提取php展现逻辑，模板中仅保留foreach、if之类的简单逻辑 通过以”J_”开头的id、class与js进行耦合 js模板放回对应模块中，方便重构工程师维护 2013/12/27 * 2013/12/27 * * * 按功能模块拆分html，模块内部尽可能只关心一个数据结构 提取php展现逻辑，模板中仅保留foreach、if之类的简单逻辑 通过以”J_”开头的id、class与js进行耦合 js模板放回对应模块中，方便重构工程师维护 2013/12/27 * 2013/12/27 *