交易平台化  （前端）

文河 @yyfrankyy, f2e.us

Agenda •  概述 •  分层模型 •  模块化和工厂 •  可测试性的探索 •  前端规则引擎 •  可维护性（统一下单） •  设计点滴

概述 •  杂牌军（排名不分先后）

o  岳云，张挺，承玉，遇春，向阳，文河，云谦

•  时间 o  2011.2 – 2011.6（一期），2011.6 – 2011.8（统一下单）

•  内容 o  20+ 虚拟下单 JavaScript 重构 o  购物车确认下单和立即购买合并

分层模型 •  tc/cart/  

o  页面初始化  

•  tc/core/  o  模块工厂 o  表单验证 o  Log工具 o  营销规则引擎 o  DOM缓存

•  tc/form/  o  表单验证子集

•  tc/mods/  o  各具体业务模块 o  ui/logic  拆分

tc/cart/item

tc/cart/order

tc/cart/cart

o  http://trade.ued.taobao.net/tc/diagram/carts/png/cart.png  

模块化和工厂 •  逻辑内聚

o  KISSY 1.2.0 Loader

•  依赖解耦 o  事件中心（Event Center）

•  模块创建 o  模块工厂（Module Factory）

事件中心和工厂 •  全局消息分发和接收  

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）  

可测试性的探索 •  分层的优势

o  逻辑可单测（DOM交互部分通过测试脚本覆盖） o  测试覆盖率20-30%

•  异步测试的尝试（jasmine的二次封装）

持续回归 注意单元测试的投入产出比

前端规则引擎 •  运算逻辑抽象和内聚 •  计算复用（结果缓存） •  自动事件（联动）绑定

金额计算的抽象

可维护性（统⼀一下单） •  设计的痛

o  单例改多例，大量重构和回归 o  直接导致虚拟和统一下单分道扬镳 o  商城独自fork一份代码维护

•  性能优化（1天从30s优化到2s的故事） o  规则的延迟计算 o  DOM缓存 o  仔细调整事件绑定触发和各个核心业务点的加载顺序 o  只对最明显的部位做改进

•  关注业务数据的变更

设计点滴 •  框架选型

o  选型的意义（花多点时间思考和讨论，实现是最简单的一环） o  利用现有模块，框架和实现去调整，利于快速实现 o  设计以减少系统熵增加为导向

•  MVC or 简单分层

•  持续重构和快速迭代（快速淘汰） o  把变更当成常态来设计 o  在适当的时候果断重写

•  规则引擎：DSL or not?

•  文档的投入 o  接口文档：http://trade.ued.taobao.net/tc/docs/index.html o  文档的投入也要随着业务而变更

•  测试的投入

谢谢！ •  Q&A