Your SlideShare is downloading. ×

淘宝交易平台前端重构

1,072
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,072
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×