最近在知乎上看到有人问“一个人开发一个项目是一种怎样的体验?”,这让我想起了2011年刚出道那会儿的项目经历。当时在一家旅游公司工作,整个公司就我一个技术,老板和我们算是校友,通过关系在我们学校招一个人过来做开发,主要维护公司的网站。当时比较流行的社交平台是开心网,老板突发奇想,让我们也做个类似的系统,就叫驴友驿站(目前已经下线),刚出来混,一听要做个这么好玩的系统,马上就一头扎进去了。当时是个热血青年,看到公司的网站是用古老的ASP做的,马上就想将其改版,但碍于时间不够,只能先搁置,完成当前的任务才是该做的事情,顺便为自己将要用的相关技术试试水。

一、准备阶段

1)搜集需求

  虽然大三的时候曾经和学校的前辈一起搞过一个ERP系统,但最终并没有上线,项目做到一半被迫终止了,因此还是非常缺乏项目经验的。现在还是一个人,该如何切入,是我目前面对的首要问题。我首先是搜集需求,没有产品经理就只能自己来,还好对开心网比较熟悉。在粗略的思考过之后,草率的决定先完成以下5个模块:

1、会员模块,包括个人信息、头像、签名、动态、相册等。

2、转帖模块,包括发帖、评论、回复、转发、观点等。

3、日记模块,包括列表、新增、删除、修改等。

4、好友模块,包括搜索、添加、分组、读取好友列表等。

5、私信模块,包含收件箱、发件箱和发送。

  后续又加了圈子和提问模块。整个开发周期大概是一个月时间,每天都是热血沸腾的干着,把这社交系统当成了自己的事业来看待,因此当时的效率非常高。虽然兴致很高,但毕竟缺乏经验,很多时候都是在探索,效率、性能、扩展性、容错性、移植性等架构概念这些都是不存在的(如下图所示),考虑的点只有一个,即效果是否和目标一样。当时还是IE6大行其道的年代,写页面很多时候都要与IE6斗智斗勇,经常会出现其它浏览器都正常,就偏偏IE6有问题,每次都要为它开小灶,处处受限,又不得不适配,那种滋味很复杂。

2)编辑器和数据库

  在确定好需求后就是设计数据库,先建立了十多张表,包括会员、帖子、好友关系、私信、评论、日记等,凭着感觉设计的,后期在开发过程中进行了不断地调整。在学校用的是Visual Studio 2008,正好老网站的数据库用的是MSSQL 2000,都是微软的东西,很好结合,省了兼容的操作。

   

二、开发过程

  工具都准备好后,就直接开搞了,当时也不懂前后端分离,因此没有做静态页面,直接是边写后台边写页面,导致现在下线后,我都无法看到页面,必须把环境搭建好后,才能浏览页面。

1)后台

  抛开性能和扩展性,当时社交系统主要碰到的问题主要集中在前端效果,后台碰到的棘手问题不多,此处只列举记得的几个小问题:

1、公司原先有个老式的BBS系统,里面也聚集了几万的用户,这次的社交系统中的会员要和这个BBS内的会员打通。

2、好友动态包括转帖、评论、上传照片、圈人等都算是动态,这些都会展示在个人主页中,用户量一大,该如何保存以及怎么才能不遗漏的添加这些信息。

3、好友关系的维持,在数据库中该怎么保存这层关系。

2)前端

  在完成这个系统后,得到了很大的成就感(虽然同事和用户的吐槽非常多),不过这些成就感并不来自于后台看不见的数据逻辑处理,而且前端各个能看到能操作的脚本特效,这也为我日后转岗前端埋下了伏笔。

  当时是个前端菜鸟,但还很固执的拒绝使用jQuery这个强大的第三方DOM库,想法很简单,就是觉得初学者应该用原生的,这样能更好的理解这门语言。虽然出发点没有错,但是后期结构组织不合理,使得代码冗余且混乱不堪。刚开始写前端也不懂分模块,就把大部分的逻辑脚本都写在了一个文件内(包含了2700多行代码),只有一个函数,各个功能作为该函数的原型方法存在,如下代码所示,调代码还得找半天才能定位。

function sysInfo(redirect,page){this.redirect=redirect;//ajax路径this.page=page;//页数this.row=15;
}
sysInfo.prototype.createXMLHttpRequest=function(){if (window.XMLHttpRequest) {  xmlHttp = new XMLHttpRequest();   if (xmlHttp.overrideMimeType)xmlHttp.overrideMimeType("text/xml");  } else {  if (window.ActiveXObject) {  var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];  for (var i = 0; i < activexName.length; i++) {  try {   xmlHttp = new ActiveXObject(activexName[i]);  break;  }  catch (e) {  }  }  }  }return xmlHttp;
}
sysInfo.prototype.updatePhotoTitle=function(){var oThis=this;var title=document.getElementById("TxtTitle").value;var id=document.getElementById("HdTitleId").value;var xmlHttp=oThis.createXMLHttpRequest();xmlHttp.onreadystatechange = function(){if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) {if(xmlHttp.responseText=="success"){document.getElementById("SpTitle").innerHTML=title;document.getElementById("modifyTitle").style.display="none";}else alert(xmlHttp.responseText);}}}var param=new Array();param[0]="type=updateTitle";param[1]="id="+id;param[2]="title="+escape(title);param[3]="random="+Math.random();var url = oThis.redirect+"?"+param.join("&");xmlHttp.open("GET", url, true);  xmlHttp.send(null);
}

  还犯了一个错误,当时刚接触Ajax,异步加载直接震撼到我了,产生了一个奇怪的观点,即只有异步才是好的体验。然后全局都用异步来加载,不管合不合适一刀切,但像私信收件箱、好友列表等这些内容用后台直接渲染会更简单。虽然前端有模板引擎,但自己根据不知道有这玩意儿,因此HTML代码就全部都用字符串拼接实现,如下代码所示,整个文件充斥着这些拼接语句。

sysInfo.prototype.getSmsRecive=function(){ var oThis=this;var loading=document.getElementById("loading");loading.style.display="block";var xmlHttp=oThis.createXMLHttpRequest();xmlHttp.onreadystatechange = function(){if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) {   loading.style.display="none";var div,divBox;divBox=document.getElementById("smsInfo");while(divBox.hasChildNodes())divBox.removeChild(divBox.lastChild);var divArray;if(xmlHttp.responseText==""){div=document.createElement("div");div.className="dxx_of";divArray=new Array();divArray[0]="<div style='padding: 15px 10px;' class='dxx1'></div><div class='dxx4'>暂无邮件</div><div class='cb'></div>";div.innerHTML =divArray.join("");divBox.appendChild(div);return;}if(xmlHttp.responseText=="redirect")window.location.href="../../login/userLogin.aspx";var splits=xmlHttp.responseText.split("|");var divInfos = eval("("+splits[0]+")");for(i=0;i<divInfos.length;i++){div=document.createElement("div");div.className="dxx_of";divArray=new Array();divArray[0]="<div style='padding: 15px 10px;' class='dxx1'></div>";divArray[1]="<div class='dxx4'><div class='l50_s'><a class='sl' href='../home/userHome.aspx?uid="+divInfos[i].Fid+"'>";divArray[2]="<img src='../../upload/userface/"+divInfos[i].Up+"' height='50px' width='50px'/></a></div>";divArray[3]="<div style='text-align: center; margin-top: -8px;'><a class='sl' href='../home/userHome.aspx?uid="+divInfos[i].Fid+"'>"+divInfos[i].Un+"</a></div></div>";divArray[4]="<div style='width: 120px;' class='dxx5'><div class='c9 f12'>"+divInfos[i].Ct+"</div></div>";divArray[5]="<div class='dxx6'>"+divInfos[i].Sc+"</div>";divArray[6]="<div style='width: 78px;' class='dxx4'>";divArray[7]="<div class='bb1d8'><a href=\"javascript:delSms('"+oThis.redirect+"',"+oThis.page+","+divInfos[i].Sid+",'1')\" οnclick=\"return confirm('您确定要删除这条短消息吗?')\"  class='sl2_r'>删除该消息</a></div>";divArray[8]="<div class='bb1d8'><a href='write.aspx?type=1&un="+escape(divInfos[i].Un)+"'  class='sl2_r'>回复该消息</a></div>";divArray[9]="<div class='bb1d8'><a href='write.aspx?type=2&sid="+divInfos[i].Sid+"'  class='sl2_r'>转发该消息</a></div>";divArray[10]="</div><div class='cb'></div>";div.innerHTML =divArray.join("");divBox.appendChild(div);}divBox.innerHTML+=splits[1];oThis.runJs('../../js/sns/sysRequest.js','js','sysRequest.js');}}}var param=new Array();param[0]="type=recive";param[1]="currentPage="+oThis.page;param[2]="random="+Math.random();var url = oThis.redirect+"?"+param.join("&");xmlHttp.open("GET", url, true);  xmlHttp.send(null);
}

3)插件

  当然,要想完成页面中的所有效果,肯定需要引入第三方插件。通过搜索引擎,在网上找类似的成品插件或半成品代码段,找到后再修修补补,直到符合预期效果为止。这样来来回回不知道多少次,给我一个感觉,就是前端太难学了,每次都是不带重样的,根本无从下手。

  印象最深的是头像裁剪插件,改了好久,刚开始是无从下手,后面到处翻资料才找到些眉目。最终的做法是先将新照片上传到服务器中(如左图所示),然后载入到本地,接着进行裁剪(如右图所示),期间会计算各种尺寸和坐标,一旦算错,就无法正确裁剪。

 

  后面的插件比头像裁剪都要简单点,基本都只要由前端完成,不需要后台参与,例如转帖最后的好友印象(左图)、照片圈人(右图)等。

  这是一次非常难忘的经历,可以说直接影响了我后面的职业发展。虽然现在工作没有以前那么热血了,越来越高冷,但是对技术的热情并没有减弱。对于我来说,唯一遗憾的是当时没有做任何记录,现在已经无法体会到当时的所感和所想,而且这段珍贵的回忆将越来越模糊,如果可以重来,一定会将当时的点滴都详细记下。

转载于:https://www.cnblogs.com/strick/p/10007237.html

忆2011年的秋天:一个人的项目相关推荐

  1. 回顾2011年最热门的开源PHP项目

    回顾2011年最热门的开源PHP项目 http://sd.csdn.net/a/20111231/309958.html 2011-12-31 09:22 | 188次阅读 | 来源:Dzone [已 ...

  2. 大叔手记(17):大叔2011年读过的书及2012年即将要读的书

    前言 2011年是大叔最累的一年(基本上都是晚上12点以后睡觉,早上6点30分起),读得书也是异常的多,一方面要保持自己的技术在最前列,另外方面技术管理和项目管理方面的东西也要进一步进阶,2011年读 ...

  3. TechCrunch Disrupt 2011 创业大赛冠军获得者Shaker,酒吧版Facebook

    TechFrom科技源 9.15日,TechCrunch Disrupt 2011 SF创业大赛冠军获得者酒吧版Facebook ,创业项目 Shaker 一个新型社交网络 Shaker,找到一个房间 ...

  4. 广州地铁2011年信息化基础架构平台建设项目(二)

    第一章              详细需求 1.1    数据中心设计咨询需求 1.1.1           数据中心现状调研与需求分析 根据广州地铁信息化发展规划,调研广州地铁数据中心的现状,编制 ...

  5. 博客园电子期刊2012年1月刊发布啦

    期刊访问网址:http://emag.cnblogs.com/2012/CNBlogsEmag201201.html.以下为本期期刊内容: 博客园电子期刊 No49.2012年1月刊 2012年1月编 ...

  6. 2012年度IT博客大赛50强报道:陈裕强

    2012年度IT博客大赛50强 cyq1162(陈裕强) 参赛感言: 经过一轮一轮的写文拉票苦战,感激各位网友含辛如苦地一人一IP一张票的把我拉进50强,也感谢51cto年复一年不辞辛苦地举办这类大赛 ...

  7. 我与CSDN--如白开水般纯净

    0.前言--开水纯净 本来想写成华丽的煽情文章,有千言万语,到了打字的时候,却堵在心口,打不出来,也许是经历沧桑了吧,不再泪雨滂沱,四处感慨,只有一幕幕往事历历在目,转眼而过,不惑之年,七彩斑斓的人生 ...

  8. Uusi 的 Kickstarter 成功秘诀

    Uusi 的异教扑克牌 Uusi是一家由设计师/艺术家 Linnea Gits 和 Peter Dunham 创立并领导的设计工作室.两人在各种媒介中创作作品,并在 Kickstarter 上成功筹集 ...

  9. Learn Jenkins the hard way (0) - Jenkins的罪与罚

    写在开头 Jenkins是非常流行的开源的持续交付平台,拥有丰富的插件.文档与良好的社区.是国内大多数公司私有持续集成方案CI/CD服务器的选型.开发者可以快速的通过Jenkins搭架符合自己业务场景 ...

最新文章

  1. 伪代码的写法(转载)
  2. 渗透知识-sqlmap
  3. 为什么物联网没有杀手级应用
  4. 无向图:计算亏格(环的孔洞)
  5. 字符串转数字测试--知识备忘
  6. Altium AD20的四层板叠层管理、平面层20H内缩
  7. [Python学习]错误篇二:切换当前工作目录时出错——FileNotFoundError: [WinError 3] 系统找不到指定的路径...
  8. UVa 706 ZOJ 1146 LC-Display
  9. 基于Redis和Tomcat实现集群的Session管理
  10. 闲论排样/排料算法(nesting)
  11. CnPack IDE 专家包,delphi程序开发的好助手
  12. Markdown基本语法介绍及cmd markdown下载
  13. MySQL 线程池[2021-06-26]
  14. 1006:Hello World
  15. 《Java 编程的逻辑》笔记——第1章 编程基础(一)
  16. 020.3.25普及C组 母鸡下蛋(hen)【纪中】【模拟】
  17. 数据库—Mysql相关
  18. spring框架之IoC理解
  19. 咱们也真够疯狂的。。
  20. 中国人数学能力很差?

热门文章

  1. 《拖延心理学》思维导图精华版
  2. 第三节 MapReduce(一)
  3. 简历上的哪些内容才是 HR 眼中的干货?
  4. R语言ggplot2可视化:使用patchwork包将多个ggplot2可视化结果组合起来、使用plot_spacer函数在组合结果图像中的指定位置加入空白区域(不包含任何内容,纯粹空白图)
  5. 行业站seo体验,把访客当傻瓜你才能赢!
  6. 我的编程奋斗历程[四部曲之二]-毕业初期篇
  7. 超级计算机大赛要学什么,超级计算机竞赛“七步成诗”仅三队完赛
  8. 各种说明方法的答题格式_12种说明方法的答题格式
  9. 享受知识饕餮盛宴,尽在2014年课程
  10. java用友eai_用友EAI接口开发的问题