忆2011年的秋天：一我的的项目

时间 2019-11-25

标签 2011年秋天我的项目繁體版

原文原文链接

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

1、准备阶段

1）搜集需求前端

　　虽然大三的时候曾经和学校的前辈一块儿搞过一个ERP系统，但最终并无上线，项目作到一半被迫终止了，所以仍是很是缺少项目经验的。如今仍是一我的，该如何切入，是我目前面对的首要问题。我首先是搜集需求，没有产品经理就只能本身来，还好对开心网比较熟悉。在粗略的思考过以后，草率的决定先完成如下5个模块：java

一、会员模块，包括我的信息、头像、签名、动态、相册等。ajax

二、转帖模块，包括发帖、评论、回复、转发、观点等。数据库

三、日记模块，包括列表、新增、删除、修改等。后端

四、好友模块，包括搜索、添加、分组、读取好友列表等。浏览器

五、私信模块，包含收件箱、发件箱和发送。服务器

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

2）编辑器和数据库app

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

2、开发过程

　　工具都准备好后，就直接开搞了，当时也不懂先后端分离，所以没有作静态页面，直接是边写后台边写页面，致使如今下线后，我都没法看到页面，必须把环境搭建好后，才能浏览页面。

1）后台

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

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

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

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

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')\" onclick=\"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）插件

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

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

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

　　这是一次很是难忘的经历，能够说直接影响了我后面的职业发展。虽然如今工做没有之前那么热血了，愈来愈高冷，可是对技术的热情并无减弱。对于我来讲，惟一遗憾的是当时没有作任何记录，如今已经没法体会到当时的所感和所想，并且这段珍贵的回忆将愈来愈模糊，若是能够重来，必定会将当时的点滴都详细记下。