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

Transcript

1. 灵玉— SNS 前端团队 2012.12.25 1212 · 扫货小分队
2. 项目背景
3. 项目背景 在一起，淘不同 项目成员 @ 伯飞 @ 道璘 @ 堂主 @ 伊泽 @ 灵玉 —— SNS 前端团队 共享宝贝，扫货清单，同享优惠，购物交流
4. 项目管理 功能模块化分工 明确接口人 风险控制 快速迭代
5. 项目背景 效 率
6. 效 率 STEP 1 l 应对代码不断更新？ l 应对需求不断变更？ l 应对设计搞不断改版？
7. 效 率 STEP 1 l 共享最新视觉图 l 共享最新 demo l 共享 css sprite 给设计师
8. 效 率 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>
9. 效 率 STEP 2 Qz.dataset(node) 简化异步参数
10. 效 率 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()
11. l 组件化开发，易于移植，布点 效 率 STEP 3
12. 效 率 STEP 4 不支持 IE6 ，项目减少 40% 工作量
13. 技术应用 l 无处不在的圆形头像 , 需要组件化
14. 技术应用 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) }
15. 技术应用 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); 低浏览器优雅降级方案
16. 技术应用 SNS-Jssdk SNS.widget.wishlist SNS.dev.creategroup SNS.dev.sendinvite
17. 技术应用 SNS.widget.wishlist
18. 技术应用
19. T H X 新浪销售策略中心