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
Hack Claude Code with Claude Code
choplin
7
2.5k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Cult of Friendly URLs
andyhume
79
6.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Facilitating Awesome Meetings
lara
54
6.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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