SlideShare una empresa de Scribd logo
1 de 29
淘宝帮派活动项目总结
TaoBao Faction Activities Postmortem
先发点小牢骚~XD
转变&环绕
Jquery
YUI
kissy
DPL
Tbra
Tbsp
Tms
Aptana
CDN Cmobo
Fiddler
Assets
Daily
旺旺
龙刚
Google calendar
Ppt
Excel
设计模式
Qc
KPI
洋洋洒洒就4,5百行代码?
No!
Tips:写前先动动笔,从接口开始设计,灵活性很重要,但是越灵活其实越难通
用,有的时候千万别自己想的太多,重构的时候要明白到底是为了什么。
每天都在造轮子?
No!
Tips:先问问别人有没有现成的?YUI里有没有已经实现的而你却不知道?别的业
务线是不是已经实现了啊?喔,如果非要造,记得一定要让它很牢靠,做Demo的
时候,分清楚哪是你该写的。
前辈们的东西一定就写的很合理?
No!
Tips:该改就改,但改的时候要记得问清楚是否其他地方也有引用?如果1,2年
前的设计使它足够牢靠,但也许现在它并不适用。
我不是一个优秀的天才程序员。
No!
Tips:尽力让自己成为一个好的,对的起公司,团队和自己的程序员。
牢骚结束,开始正经的谈项目了~XD
淘宝帮派
当然这些都不是我做的……
线上 Daily环境,入口
老活动区默默下线。。。
新活动统一上线。。。
新的功能亮点
异步不刷新,浮层弹出上传活动
海报
新版kissy编辑器……
验证码保护,点击才出现最新验证
码,统一更换了以前很丑的那个验
证样式
浏览之后立刻上
传,节约用户操
作
上传成功后,根
据条件进行加载
截图框,实时右
侧进行预览
保存后不刷新,直
接充填默认位置
前台展示的倒
计时与状态切
换是这次项目
中比较复杂的
一个交互。
这步操作同样全部用浮层和ajax实现。
查看和导出活
动成员
参加活动采用的是用浮层展示,操
作完成后刷新页面的方式,因为要
用到2步提示,所以全部是ajax方法
实现,其中的各种身份验证是挺恶
心的,然后就是错误的提示也分很
多种类型,(展示类型),最后就
是数据的同步一致性,前台JS脚本
的逻辑部分实现的较多,比较繁复。
没有采用iframe内外通讯的方法,
而是用Dom innerHTML直接生成的
相关对应界面,事件都采用了委派。
单独的查看页面~其实和帖子前台的差不多。
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
一些问题
1,校验。
2,浮动层。
3,拿来的ImageCropper有BUG。
4,简陋的封装。
5,单体模式。
6,与其他部门人员的合作。
前台校验,老生常谈
太多的业务逻辑,还有太多的校验前台并不能实现,比如禁忌词,限制
词,服务器端时间等。
浮动层
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
拿来的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
*/
简陋的封装。
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"
});
单体模式。
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(){......}
}
};
与其他部门人员的合作。
1,与PD和视觉沟通,评审时一定要问清楚细节,未来扩展性,和他们的心理预
期。
2,与开发前期确定技术方案一定要尽早,最好在做DEMO的时候就碰一下头。
3,测试最好尽早介入。
总之,减小风险,是最重要的。
PM:唐三
PD:向秋
视觉:彩臣
开发:大仁,玄胤,剧辛,龙毅,石冲
前端:龙啸
测试:小菊,冰心
Scm:顾琦
……
……
项目组成员:
Thanks

Más contenido relacionado

Similar a 淘宝帮派活动项目总结 (6)

事件風暴-領域建模
事件風暴-領域建模事件風暴-領域建模
事件風暴-領域建模
 
產品原型(Prototype)觀念分享 with Axure RP
產品原型(Prototype)觀念分享 with Axure RP產品原型(Prototype)觀念分享 with Axure RP
產品原型(Prototype)觀念分享 with Axure RP
 
商周 Ppt 规划力+
商周 Ppt   规划力+商周 Ppt   规划力+
商周 Ppt 规划力+
 
把握设计和开发的均衡
把握设计和开发的均衡把握设计和开发的均衡
把握设计和开发的均衡
 
我要活下來 - Ruby Junior 工程師的存活術
我要活下來 - Ruby Junior 工程師的存活術我要活下來 - Ruby Junior 工程師的存活術
我要活下來 - Ruby Junior 工程師的存活術
 
presentation design
presentation designpresentation design
presentation design
 

淘宝帮派活动项目总结