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
淘宝1212扫货小分队项目分享
Search
d2forum
January 05, 2013
2
450
淘宝1212扫货小分队项目分享
d2forum
January 05, 2013
Tweet
Share
More Decks by d2forum
See All by d2forum
TMS的PHP特性
d2forum
0
1.6k
Leap Motion体感实战
d2forum
0
1.2k
跨终端产品实践
d2forum
12
1.9k
Touching Future—s01-e01
d2forum
2
890
KissyCake
d2forum
3
750
贡献标准.s01.e02
d2forum
3
1.3k
一淘响应式设计实践
d2forum
10
960
响应式web设计与实现介绍
d2forum
8
790
定制版设计开发vs响应式设计开发
d2forum
0
170
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Automating Front-end Workflow
addyosmani
1369
200k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Done Done
chrislema
182
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Navigating Team Friction
lara
183
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Typedesign – Prime Four
hannesfritz
41
2.5k
Transcript
灵玉— SNS 前端团队 2012.12.25 1212 · 扫货小分队
项目背景
项目背景 在一起,淘不同 项目成员 @ 伯飞 @ 道璘 @ 堂主 @
伊泽 @ 灵玉 —— SNS 前端团队 共享宝贝,扫货清单,同享优惠,购物交流
项目管理 功能模块化分工 明确接口人 风险控制 快速迭代
项目背景 效 率
效 率 STEP 1 l 应对代码不断更新? l 应对需求不断变更? l 应对设计搞不断改版?
效 率 STEP 1 l 共享最新视觉图 l 共享最新 demo l
共享 css sprite 给设计师
效 率 STEP 2 约定接口 AJAX ( JSON , JSONP
) {"code":"0","msg":" 系统错误 "} {"code":"-1","msg":" 未登录 "} {"code":"1","msg":" 成功 "} 约定参数 AJAX , html5 自定义属性“ data-” <div id="invited" data-userid="123345" data-username="shuqi" data-client="332"> 邀请 </div>
效 率 STEP 2 Qz.dataset(node) 简化异步参数
效 率 STEP 3 l 前端规范统一 API(QZ) 简约原则 Qz.dataset(node) Qz.api.define({key:value})
Qz.api(define,dataset,callback) Qz.alert() Qz.buffer() Qz.popup() Qz.getToken() Qz.tooltip()
l 组件化开发,易于移植,布点 效 率 STEP 3
效 率 STEP 4 不支持 IE6 ,项目减少 40% 工作量
技术应用 l 无处不在的圆形头像 , 需要组件化
技术应用 Css3: 高浏览器 border-radius:30px; background-color:#8d9094; VML(Vector Markup Language):ie6/7/8 <html xmlns:v="urn:schemas-microsoft-com:vml">
VML - Oval 对象 ie6/7/8 实现圆形 v\:* { Behavior: url(#default#VML) }
技术应用 css3-transition 平滑( setInterval ) -ms-transition: opacity 0.1s ease-in-out; -webkit-transition:
opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; css3-transform 速度提升 transform: scale(1.7,1.7); 低浏览器优雅降级方案
技术应用 SNS-Jssdk SNS.widget.wishlist SNS.dev.creategroup SNS.dev.sendinvite
技术应用 SNS.widget.wishlist
技术应用
T H X 新浪销售策略中心