淘宝1212扫货小分队项目分享

灵玉— 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 新浪销售策略中心

淘宝1212扫货小分队项目分享

淘宝1212扫货小分队项目分享

d2forum

More Decks by d2forum

Featured

Transcript

灵玉— SNS 前端团队 2012.12.25 1212 · 扫货小分队

项目背景

项目背景在一起，淘不同项目成员 @ 伯飞 @ 道璘 @ 堂主 @

项目管理功能模块化分工明确接口人风险控制快速迭代

项目背景效率

效率 STEP 1 l 应对代码不断更新？ l 应对需求不断变更？ l 应对设计搞不断改版？

效率 STEP 1 l 共享最新视觉图 l 共享最新 demo l

效率 STEP 2 约定接口 AJAX （ JSON ， JSONP

效率 STEP 2 Qz.dataset(node) 简化异步参数

效率 STEP 3 l 前端规范统一 API(QZ) 简约原则 Qz.dataset(node) Qz.api.define({key:value})

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">

技术应用 css3-transition 平滑（ setInterval ） -ms-transition: opacity 0.1s ease-in-out; -webkit-transition:

技术应用 SNS-Jssdk SNS.widget.wishlist SNS.dev.creategroup SNS.dev.sendinvite

技术应用 SNS.widget.wishlist

技术应用

T H X 新浪销售策略中心