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