&emsp;&emsp;最近在知乎上看到有人問“[一個人開發一個項目是一種怎樣的體驗？](https://www.zhihu.com/question/283349146/answer/492274903)”，這讓我想起了2011年剛出道那會兒的項目經歷。當時在一家旅游公司工作，整個公司就我一個技術，老板和我們算是校友，通過關系在我們學校招一個人過來做開發，主要維護公司的網站。當時比較流行的社交平臺是開心網，老板突發奇想，讓我們也做個類似的系統，就叫驢友驛站（目前已經下線），剛出來混，一聽要做個這么好玩的系統，馬上就一頭扎進去了。當時是個熱血青年，看到公司的網站是用古老的ASP做的，馬上就想將其改版，但礙于時間不夠，只能先擱置，完成當前的任務才是該做的事情，順便為自己將要用的相關技術試試水。 ## 一、準備階段 **1）搜集需求** &emsp;&emsp;雖然大三的時候曾經和學校的前輩一起搞過一個ERP系統，但最終并沒有上線，項目做到一半被迫終止了，因此還是非常缺乏項目經驗的。現在還是一個人，該如何切入，是我目前面對的首要問題。我首先是搜集需求，沒有產品經理就只能自己來，還好對開心網比較熟悉。在粗略的思考過之后，草率的決定先完成以下5個模塊： 1. 會員模塊，包括個人信息、頭像、簽名、動態、相冊等。 2. 轉帖模塊，包括發帖、評論、回復、轉發、觀點等。 3. 日記模塊，包括列表、新增、刪除、修改等。 4. 好友模塊，包括搜索、添加、分組、讀取好友列表等。 5. 私信模塊，包含收件箱、發件箱和發送。 &emsp;&emsp;后續又加了圈子和提問模塊。整個開發周期大概是一個月時間，每天都是熱血沸騰的干著，把這社交系統當成了自己的事業來看待，因此當時的效率非常高。雖然興致很高，但畢竟缺乏經驗，很多時候都是在探索，效率、性能、擴展性、容錯性、移植性等架構概念這些都是不存在的（如下圖所示），考慮的點只有一個，即效果是否和目標一樣。當時還是IE6大行其道的年代，寫頁面很多時候都要與IE6斗智斗勇，經常會出現其它瀏覽器都正常，就偏偏IE6有問題，每次都要為它開小灶，處處受限，又不得不適配，那種滋味很復雜。 :-:  **2）編輯器和數據庫** &emsp;&emsp;在確定好需求后就是設計數據庫，先建立了十多張表，包括會員、帖子、好友關系、私信、評論、日記等，憑著感覺設計的，后期在開發過程中進行了不斷地調整。在學校用的是Visual Studio 2008，正好老網站的數據庫用的是MSSQL 2000，都是微軟的東西，很好結合，省了兼容的操作。 :-:  ## 二、開發過程 &emsp;&emsp;工具都準備好后，就直接開搞了，當時也不懂前后端分離，因此沒有做靜態頁面，直接是邊寫后臺邊寫頁面，導致現在下線后，我都無法看到頁面，必須把環境搭建好后，才能瀏覽頁面。 **1）后臺** &emsp;&emsp;拋開性能和擴展性，當時社交系統主要碰到的問題主要集中在前端效果，后臺碰到的棘手問題不多，此處只列舉記得的幾個小問題： 1. 公司原先有個老式的BBS系統，里面也聚集了幾萬的用戶，這次的社交系統中的會員要和這個BBS內的會員打通。 2. 好友動態包括轉帖、評論、上傳照片、圈人等都算是動態，這些都會展示在個人主頁中，用戶量一大，該如何保存以及怎么才能不遺漏的添加這些信息。 3. 好友關系的維持，在數據庫中該怎么保存這層關系。 **2）前端** &emsp;&emsp;在完成這個系統后，得到了很大的成就感（雖然同事和用戶的吐槽非常多），不過這些成就感并不來自于后臺看不見的數據邏輯處理，而且前端各個能看到能操作的腳本特效，這也為我日后轉崗前端埋下了伏筆。 &emsp;&emsp;當時是個前端菜鳥，但還很固執的拒絕使用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); } ~~~ &emsp;&emsp;還犯了一個錯誤，當時剛接觸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）插件** &emsp;&emsp;當然，要想完成頁面中的所有效果，肯定需要引入第三方插件。通過搜索引擎，在網上找類似的成品插件或半成品代碼段，找到后再修修補補，直到符合預期效果為止。這樣來來回回不知道多少次，給我一個感覺，就是前端太難學了，每次都是不帶重樣的，根本無從下手。 &emsp;&emsp;印象最深的是頭像裁剪插件，改了好久，剛開始是無從下手，后面到處翻資料才找到些眉目。最終的做法是先將新照片上傳到服務器中（如左圖所示），然后載入到本地，接著進行裁剪（如右圖所示），期間會計算各種尺寸和坐標，一旦算錯，就無法正確裁剪。 :-:  &emsp;&emsp;后面的插件比頭像裁剪都要簡單點，基本都只要由前端完成，不需要后臺參與，例如轉帖最后的好友印象（左圖）、照片圈人（右圖）等。 :-:  &emsp;&emsp;這是一次非常難忘的經歷，可以說直接影響了我后面的職業發展。雖然現在工作沒有以前那么熱血了，越來越高冷，但是對技術的熱情并沒有減弱。對于我來說，唯一遺憾的是當時沒有做任何記錄，現在已經無法體會到當時的所感和所想，而且這段珍貴的回憶將越來越模糊，如果可以重來，一定會將當時的點滴都詳細記下。 ***** > 原文標題：[憶2011年的秋天：一個人的項目](https://www.cnblogs.com/strick/p/10007237.html) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。