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
86
微信读书阅读器架构
yyfrankyy
2
2.2k
Watcher - EventBus Reinvented
yyfrankyy
0
150
SQLite 调优实践
yyfrankyy
0
130
FtnApp 的缩略图实践
yyfrankyy
0
51
JSDoc 的使用
yyfrankyy
0
140
淘宝搜索前端优化
yyfrankyy
0
180
淘宝排行榜 V3 项目总结
yyfrankyy
0
120
Other Decks in Programming
See All in Programming
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.4k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
280
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
170
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.7k
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
260
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
240
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
210
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
220
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
450
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Into the Great Unknown - MozCon
thekraken
40
2k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Docker and Python
trallard
45
3.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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