Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
交易平台化(前端)
Search
Frank Xu
June 01, 2011
Programming
0
170
交易平台化(前端)
Frank Xu
June 01, 2011
Tweet
Share
More Decks by Frank Xu
See All by Frank Xu
Proxy Pattern
yyfrankyy
0
85
微信读书阅读器架构
yyfrankyy
2
2.2k
Watcher - EventBus Reinvented
yyfrankyy
0
150
SQLite 调优实践
yyfrankyy
0
130
FtnApp 的缩略图实践
yyfrankyy
0
50
JSDoc 的使用
yyfrankyy
0
140
淘宝搜索前端优化
yyfrankyy
0
170
淘宝排行榜 V3 项目总结
yyfrankyy
0
120
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
Porting a visionOS App to Android XR
akkeylab
0
460
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Goで作る、開発・CI環境
sin392
0
230
Hack Claude Code with Claude Code
choplin
4
2k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Featured
See All Featured
It's Worth the Effort
3n
185
28k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
A designer walks into a library…
pauljervisheath
207
24k
Code Reviewing Like a Champion
maltzj
524
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Writing Fast Ruby
sferik
628
62k
Unsuck your backbone
ammeep
671
58k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
交易平台化 (前端) 文河 @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