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
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Is Xcode slowly dying out in 2025?
uetyo
1
270
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Porting a visionOS App to Android XR
akkeylab
0
460
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Unsuck your backbone
ammeep
671
58k
Documentation Writing (for coders)
carmenintech
72
4.9k
4 Signs Your Business is Dying
shpigford
184
22k
The Invisible Side of Design
smashingmag
301
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How STYLIGHT went responsive
nonsquared
100
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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