交易平台化（前端）

Transcript

1. 交易平台化   （前端） 文河 @yyfrankyy, f2e.us
2. Agenda •  概述 •  分层模型 •  模块化和工厂 •  可测试性的探索 •  前端规则引擎 •  可维护性（统一下单） •  设计点滴
3. 概述 •  杂牌军（排名不分先后） o  岳云，张挺，承玉，遇春，向阳，文河，云谦 •  时间 o  2011.2 – 2011.6（一期），2011.6 – 2011.8（统一下单） •  内容 o  20+ 虚拟下单 JavaScript 重构 o  购物车确认下单和立即购买合并
4. 分层模型 •  tc/cart/   o  页面初始化   •  tc/core/   o  模块工厂 o  表单验证 o  Log工具 o  营销规则引擎 o  DOM缓存 •  tc/form/   o  表单验证子集 •  tc/mods/   o  各具体业务模块 o  ui/logic  拆分
5. tc/cart/item
6. tc/cart/order
7. tc/cart/cart o  http://trade.ued.taobao.net/tc/diagram/carts/png/cart.png  
8. 模块化和工厂 •  逻辑内聚 o  KISSY 1.2.0 Loader •  依赖解耦 o  事件中心（Event Center） •  模块创建 o  模块工厂（Module Factory）
9. 事件中心和工厂 •  全局消息分发和接收   o  var  EventCenter  =  KISSY.merge({},  KISSY.EventTarget)   o  局部消息分组（fire(‘group1:event1’)）   o  http://trade.ued.taobao.net/tc/docs/symbols/MIXED.html •  模块“原型”——Loader的加载扩展 o  事件方法（EventTarget） o  事件中心（EventCenter）  
10. 可测试性的探索 •  分层的优势 o  逻辑可单测（DOM交互部分通过测试脚本覆盖） o  测试覆盖率20-30% •  异步测试的尝试（jasmine的二次封装）
11. 持续回归 注意单元测试的投入产出比
12. 前端规则引擎 •  运算逻辑抽象和内聚 •  计算复用（结果缓存） •  自动事件（联动）绑定
13. 金额计算的抽象
14. 可维护性（统⼀一下单） •  设计的痛 o  单例改多例，大量重构和回归 o  直接导致虚拟和统一下单分道扬镳 o  商城独自fork一份代码维护 •  性能优化（1天从30s优化到2s的故事） o  规则的延迟计算 o  DOM缓存 o  仔细调整事件绑定触发和各个核心业务点的加载顺序 o  只对最明显的部位做改进 •  关注业务数据的变更
15. 设计点滴 •  框架选型 o  选型的意义（花多点时间思考和讨论，实现是最简单的一环） o  利用现有模块，框架和实现去调整，利于快速实现 o  设计以减少系统熵增加为导向 •  MVC or 简单分层 •  持续重构和快速迭代（快速淘汰） o  把变更当成常态来设计 o  在适当的时候果断重写 •  规则引擎：DSL or not? •  文档的投入 o  接口文档：http://trade.ued.taobao.net/tc/docs/index.html o  文档的投入也要随着业务而变更 •  测试的投入
16. 谢谢！ •  Q&A