憶2011年的秋天：一個人的項目

　　最近在知乎上看到有人問“一個人開發一個項目是一種怎樣的體驗？”，這讓我想起了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')\" 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）插件

　　當然，要想完成頁面中的所有效果，肯定需要引入第三方插件。通過搜索引擎，在網上找類似的成品插件或半成品代碼段，找到后再修修補補，直到符合預期效果為止。這樣來來回回不知道多少次，給我一個感覺，就是前端太難學了，每次都是不帶重樣的，根本無從下手。

　　印象最深的是頭像裁剪插件，改了好久，剛開始是無從下手，后面到處翻資料才找到些眉目。最終的做法是先將新照片上傳到服務器中（如左圖所示），然后載入到本地，接着進行裁剪（如右圖所示），期間會計算各種尺寸和坐標，一旦算錯，就無法正確裁剪。

 

 　　后面的插件比頭像裁剪都要簡單點，基本都只要由前端完成，不需要后台參與，例如轉帖最后的好友印象（左圖）、照片圈人（右圖）等。

　　這是一次非常難忘的經歷，可以說直接影響了我后面的職業發展。雖然現在工作沒有以前那么熱血了，越來越高冷，但是對技術的熱情並沒有減弱。對於我來說，唯一遺憾的是當時沒有做任何記錄，現在已經無法體會到當時的所感和所想，而且這段珍貴的回憶將越來越模糊，如果可以重來，一定會將當時的點滴都詳細記下。