憶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);
}