Your SlideShare is downloading. ×
  • Like
淘宝帮派活动项目总结
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

淘宝帮派活动项目总结

  • 2,125 views
Published

我在淘宝第一个项目的总结PPT

我在淘宝第一个项目的总结PPT

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,125
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
22
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 淘宝帮派活动项目总结 TaoBao Faction Activities Postmortem
  • 2. 先发点小牢骚~XD
  • 3. 转变&环绕 Jquery YUI kissy DPL Tbra Tbsp Tms Aptana CDN Cmobo Fiddler Assets Daily 旺旺 龙刚 Google calendar Ppt Excel 设计模式 Qc KPI
  • 4. 洋洋洒洒就4,5百行代码? No! Tips:写前先动动笔,从接口开始设计,灵活性很重要,但是越灵活其实越难通 用,有的时候千万别自己想的太多,重构的时候要明白到底是为了什么。
  • 5. 每天都在造轮子? No! Tips:先问问别人有没有现成的?YUI里有没有已经实现的而你却不知道?别的业 务线是不是已经实现了啊?喔,如果非要造,记得一定要让它很牢靠,做Demo的 时候,分清楚哪是你该写的。
  • 6. 前辈们的东西一定就写的很合理? No! Tips:该改就改,但改的时候要记得问清楚是否其他地方也有引用?如果1,2年 前的设计使它足够牢靠,但也许现在它并不适用。
  • 7. 我不是一个优秀的天才程序员。 No! Tips:尽力让自己成为一个好的,对的起公司,团队和自己的程序员。
  • 8. 牢骚结束,开始正经的谈项目了~XD
  • 9. 淘宝帮派 当然这些都不是我做的……
  • 10. 线上 Daily环境,入口
  • 11. 老活动区默默下线。。。 新活动统一上线。。。
  • 12. 新的功能亮点 异步不刷新,浮层弹出上传活动 海报 新版kissy编辑器…… 验证码保护,点击才出现最新验证 码,统一更换了以前很丑的那个验 证样式
  • 13. 浏览之后立刻上 传,节约用户操 作 上传成功后,根 据条件进行加载 截图框,实时右 侧进行预览 保存后不刷新,直 接充填默认位置
  • 14. 前台展示的倒 计时与状态切 换是这次项目 中比较复杂的 一个交互。 这步操作同样全部用浮层和ajax实现。 查看和导出活 动成员
  • 15. 参加活动采用的是用浮层展示,操 作完成后刷新页面的方式,因为要 用到2步提示,所以全部是ajax方法 实现,其中的各种身份验证是挺恶 心的,然后就是错误的提示也分很 多种类型,(展示类型),最后就 是数据的同步一致性,前台JS脚本 的逻辑部分实现的较多,比较繁复。 没有采用iframe内外通讯的方法, 而是用Dom innerHTML直接生成的 相关对应界面,事件都采用了委派。
  • 16. 单独的查看页面~其实和帖子前台的差不多。
  • 17. JS文件: 1,popup.js(负责浮动层)3K 2,bp_activity.js(活动发布页面-包括ajax上传,一些小交互,图片截取框的实现 等)8k 3,actdatail.js(datail倒计时,前台计算剩余人数,不同状态的活动样式的控制 等)2k 4,actlayer.js(datail参加活动浮层中的逻辑,生成Dom界面,ajax处理与请求管 理等)10K 额外的文件: 1,tablecolor.js(IE6隔行换色)1k 2,event-delegate.js(YUI的委派) 3,element.js(YUI委派依赖文件) 4,selector.js( YUI委派依赖文件) 5, simplecalendar(tbra的日历) CSS文件: 1,prom_activity.css(项目相关的独立新增样式文件) 13k 总计不算HTML,压缩过后编写的项目代码量为:37k
  • 18. 一些问题 1,校验。 2,浮动层。 3,拿来的ImageCropper有BUG。 4,简陋的封装。 5,单体模式。 6,与其他部门人员的合作。
  • 19. 前台校验,老生常谈 太多的业务逻辑,还有太多的校验前台并不能实现,比如禁忌词,限制 词,服务器端时间等。
  • 20. 浮动层 YAHOO.util.popup(btn, target, ['mypopup-close', 'sub-close']).fire(); Uploadpic=new YAHOO.util.popup('J_UploadBtn','J_Incision',close).int(); Uploadpic.hide(); 不支持自适应高宽, target需要样式固定高宽, IE6/7/8 FF Opera chrome Safari
  • 21. 拿来的ImageCropper有BUG。 /** * @private * @method _setConstraints * @param Boolean inside Used when called from inside a resize event, false by default (dragging) * @description Set the DragDrop constraints to keep the element inside the crop area. * @return {Object} Object containing Top, Right, Bottom and Left constraints */
  • 22. 简陋的封装。 var TimeBar = new TB.TimeBar.initialize('J_TimeBar', 'J_TimeStatus','J_TimeContainer'); var actlayer = function(btn, type, obj){ return new YAHOO.widget.actlayer(btn, type, obj); }; YAHOO.util.Get.script(["http://assets.taobaocdn.com/yui/2.7.0/build/element/element-min.js", "http://assets.taobaocdn.com/yui/2.7.0/build/selector/selector-min.js", "http://assets.taobaocdn.com/yui/2.8.0r4/build/event-delegate/event-delegate-min.js", "http://assets.matrix-gapp.taobao.net/app/matrix/js/popup.js?t=20101029.js", "http://assets.matrix-gapp.taobao.net/app/matrix/js/actlayer.js?t=20101029.js"], { onSuccess: function(){ actlayer("J_JoinAct", "affirmact", { title: "u6D4Bu8BD5u5B8Cu6210u5220u9664", target: "act-popup", constitutor: "tbtest101", actTime: "2010-11-11 星期四 12:00(<strong>开始</strong>)--2010-11-17 星期三 12:00(<strong>结束</strong>)", threadId: "106720647", groupId: "472001", money: "免费", phone: "false", needCheckcode: "false", tbTokenFieldName:"_fmw.j._0.t", phoneFieldName:"_fmw.j._0.p", checkcodeFieldName:"_fmw.j._0.c", tbToken: "f736755700d18", verifyCodeUrl: "http://new.checkcode.daily.taobao.net:8888/auction/checkcode?sessionID=c2082f1b1a3cc4f233f15a6e9b13add2&_ts=1289445151374" }).intbind(); }, charset: "gbk" });
  • 23. 单体模式。 Y.widget.actlayer = function(btn, type, config){ var self = this; self.btn = btn; self.type = type; self.config = config; //全角半角转换函数 var _FullToDBC=function(Str) {......}; //构造post数据 var _postdata=function(type){......}; //配置类型 var _typelist={......}; //超时请求 var _failure=function(o){......}; //退出活动的回调 var _exitback={......} //参加活动之后的回调 var _doback={......}; //第一次检测身份参加的回调 var _canjionback={......}; //检测是否有资格参加活动 var _canjion=function(){......}; //绑定事件 var _bind=function(){......}; //注销事件 var _purgeElement=function(){......}; //弹出效果 var _popup=function(){......}; //启动第一次弹窗 var _fire=function(){.......}; //确认线下活动的回调 var _joincallback=function(target,constitutor,status,errormsg){......}; //tips提示 var _popuptips=function(target,msg){......}; return { //初始化 intbind: function(){......} } };
  • 24. 与其他部门人员的合作。 1,与PD和视觉沟通,评审时一定要问清楚细节,未来扩展性,和他们的心理预 期。 2,与开发前期确定技术方案一定要尽早,最好在做DEMO的时候就碰一下头。 3,测试最好尽早介入。 总之,减小风险,是最重要的。
  • 25. PM:唐三 PD:向秋 视觉:彩臣 开发:大仁,玄胤,剧辛,龙毅,石冲 前端:龙啸 测试:小菊,冰心 Scm:顾琦 …… …… 项目组成员:
  • 26. Thanks