結(jié)對作業(yè)搭檔：童宇欣

?

本篇博客結(jié)構(gòu)一覽：

1）.前言(包括倉庫地址等項目信息)

2）.開始前PSP展示

3）.結(jié)對編程對接口的設(shè)計

4）.計算模塊接口的設(shè)計與實現(xiàn)過程

5）.計算模塊接口部分的性能改進(jìn)

6）.計算模塊部分單元測試展示

7）.計算模塊部分異常處理說明

8）.界面模塊的詳細(xì)設(shè)計過程

9）.界面模塊與計算模塊的對接

10）.結(jié)對過程的描述

11）.結(jié)對編程的優(yōu)缺點

12）.完成后實際的PSP

13）.項目總結(jié)與改進(jìn)

1）前言

本次結(jié)對項目，我們制作的是網(wǎng)頁版的四則運算系統(tǒng)。在結(jié)對的過程中，我（王文雨）負(fù)責(zé)前端，童宇欣負(fù)責(zé)后端。一起進(jìn)行了兩部分功能的對接與融合

以下是我們的一些項目信息：

倉庫地址（王文雨的倉庫）：https://coding.net/u/theMostCute/p/sizeyunsuanxitong/git/tree/master/?public=true

倉庫地址（童宇欣的倉庫）：https://git.coding.net/honey_xiaoxinxin/FreshCalculate.git

網(wǎng)頁版可測試的URL地址：http://47.93.197.5:8080/FirstCalculate/index.jsp

項目代碼說明（以童宇欣的代碼倉庫內(nèi)容為準(zhǔn)）：項目整體放在了Calculate文件夾下，里面包含命令行出題部分代碼NewCalculate，以及網(wǎng)頁版完整源代碼(web文件夾下)。命令行測試入口為src下Command.java;在src下將其編譯，即可輸入數(shù)據(jù)進(jìn)行測試運行。

2）.開始前PSP展示

? ?PSP　　

?

PSP2.1	任務(wù)內(nèi)容	計劃共完成需要的時間(min)
Planning	計劃	20
Estimate	估計這個任務(wù)需要多少時間，并規(guī)劃大致工作步驟	10
Development	開發(fā)	1000
Analysis	需求分析 (包括學(xué)習(xí)新技術(shù))	20
Design Spec	?生成設(shè)計文檔	20
Design Review	設(shè)計復(fù)審?(和同事審核設(shè)計文檔)	10
Coding Standard	?代碼規(guī)范?(為目前的開發(fā)制定合適的規(guī)范)	1
Design	具體設(shè)計	20
?Coding	具體編碼	500
Code Review	代碼復(fù)審	20
?Test	測試（自我測試，修改代碼，提交修改）	15
Reporting	報告	20
Test Report	測試報告	10
? ?Size Measurement	計算工作量	10

3）.結(jié)對編程對接口的設(shè)計

?在《構(gòu)建之法》書中沒有找到有關(guān)信息，希望老師在設(shè)計要求的時候，可以告訴我們頁數(shù)。我在網(wǎng)上查閱了資料。

Information Hiding信息隱藏：信息隱藏指在設(shè)計和確定模塊時，使得一個模塊內(nèi)包含的特定信息（過程或數(shù)據(jù)），對于不需要這些信息的其他模塊來說，是不可訪問的。

Interface Design接口設(shè)計：是傳統(tǒng)的后勤保障的一種要素也是一種后勤功能。

Loose Coupling松耦合:系統(tǒng)通常是基于消息的系統(tǒng)，此時客戶端和遠(yuǎn)程服務(wù)并不知道對方是如何實現(xiàn)的。客戶端和服務(wù)之間的通訊由消息的架構(gòu)支配。只要消息符合協(xié)商的架構(gòu)，則客戶端或服務(wù)的實現(xiàn)就可以根據(jù)需要進(jìn)行更改，而不必?fù)?dān)心會破壞對方。

本次作業(yè)采用的是網(wǎng)頁制作，整體采用MVC模型MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設(shè)計典范，用一種業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個部件里面，在改進(jìn)和個性化定制界面及用戶交互的同時，不需要重新編寫業(yè)務(wù)邏輯。MVC被獨特的發(fā)展起來用于映射傳統(tǒng)的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結(jié)構(gòu)中。本次作業(yè)進(jìn)行了模塊化編程，運算模塊和界面模塊相對較獨立，盡量做到了低耦合度。讓判斷正誤和計時以及條件受限放到前端制作，減少服務(wù)器的負(fù)擔(dān)。

4）.計算模塊接口的設(shè)計與實現(xiàn)過程

我負(fù)責(zé)的有

①計算結(jié)果正誤判斷：

???用js方法通過回答數(shù)組對答案數(shù)組的一一對應(yīng)。

for(var i=0;i<huida.length;i++){anwser[i].style.display="inline-block";if(huida[i].value==daan[i].innerHTML){yesno[i].innerHTML="√";yesno[i].style.color="#1DF126";yes++;}else{yesno[i].innerHTML="×";yesno[i].style.color="red";no++;}}

　　

②智能出題的條件判斷，通過js方法，限制輸入的條件

var oBiaodan=document.getElementById('oBiaodan'); $("#yiding").click(function(){var nummMax=document.getElementById('nummMax');var numm=document.getElementById('numm');var minn=document.getElementById('minn');var maxx=document.getElementById('maxx');if(numm.value==""){alert("請?zhí)顚戭}目數(shù)量！！！");oBiaodan.onsubmit=function(){return false;} }if(numm.value<1||numm.value>10000){alert("題目數(shù)量超出范圍，范圍為1-10000");oBiaodan.onsubmit=function(){return false;} }if(minn.value==""||minn.value<1||minn.value>50){alert("請?zhí)顚懻_范圍！！！下線范圍1-100，上限范圍50到1000 ");oBiaodan.onsubmit=function(){return false;} }if(maxx.value==""||maxx.value<50||maxx.value>1000){alert("請?zhí)顚懻_范圍！！！下線范圍1-100，上限范圍50到1000 ");oBiaodan.onsubmit=function(){return false;} }});

?

5）.計算模塊接口部分的性能改進(jìn)（這部分展示雨欣的成果）

1.性能分析改進(jìn)

在運算模塊的性能分析過程中，大約花費了2小時，首先經(jīng)過性能分析知道了我有些資源在使用結(jié)束后是沒有回收的，經(jīng)過排查后，我發(fā)現(xiàn)了是在寫入文件后沒有關(guān)閉輸出流，導(dǎo)致了資源沒有完全回收。發(fā)現(xiàn)這一問題后，我針對它進(jìn)行了改進(jìn)，關(guān)閉了輸出流。使項目的性能得到了提高。同時經(jīng)過性能分析，我發(fā)現(xiàn)我整個程序消耗最大函數(shù)是出題過程中的MakeQuestion3，即出題過程中不僅要出題，還要判斷題目是否符合要求，要調(diào)用調(diào)度場算法運算答案。因為這里要滿足出題的時候必須在規(guī)定數(shù)字范圍內(nèi)，及整除等條件，不符合要求的算式都要重新出題。發(fā)現(xiàn)這一問題后，我也對我的程序進(jìn)行了改進(jìn)，將是否能整除這些判斷在出兩個數(shù)字的簡單式子的時候直接進(jìn)行了保證，使這里只需要判斷每一步的運算結(jié)果是否在規(guī)定范圍內(nèi)，使整個程序的性能得到了提高。

2.性能分析截圖

項目總體分析圖，從內(nèi)存，多線程，CPU等方面分析了計算模塊的性能，截圖如下：

?

性能分析過程截圖：

首次按F4,出現(xiàn)以下截圖。可見有些資源沒有回收，經(jīng)排查，我發(fā)現(xiàn)是我沒有關(guān)閉寫入文件的輸出流。解決過這個問題后，我再一次進(jìn)行了性能分析。

經(jīng)過以上的分析，讓我了解了性能分析的過程，也知道了性能分析的重要性。

6）計算模塊部分單元測試展示

（1）分別對計算模塊的Command.java和MakeQuestion.java進(jìn)行了測試。寫了如下兩個單元測試類。

（2）以下是測試類的部分代碼截圖：

（3）構(gòu)造測試數(shù)據(jù)思路

?a.對于Command的測試，主要應(yīng)保證參數(shù)的各種輸入情況都有涉及。所以我就分別構(gòu)造了：參數(shù)輸入正確時的參數(shù)args數(shù)組；不包含必須輸入的參數(shù)，并且-o參數(shù)后沒有輸入應(yīng)有數(shù)字的args1數(shù)組；-n參數(shù)后不包含應(yīng)有的數(shù)字的args2數(shù)組；及字母參數(shù)后數(shù)字范圍有錯的args3，args4，args5，args6。經(jīng)過以上設(shè)計，最終Command類的測試覆蓋率達(dá)90%以上。

b.對于MakeQuestion方法的測試，為保證測試覆蓋率，應(yīng)保證各種類型的參數(shù)都輸入執(zhí)行。所以這里就構(gòu)造了有乘除的，有括號的；沒有乘除的，沒有括號的；及不同運算符個數(shù)限制；不同數(shù)量；不同范圍限制這些情況。經(jīng)過以上設(shè)計，最終MakeQuestion類的測試覆蓋率達(dá)90%以上。

（4）測試覆蓋率截圖展示

以下分別為兩個類測試覆蓋率的截圖展示以及部分代碼執(zhí)行情況展示：

由圖可知，此次單元測試的覆蓋率還是相對較高的，執(zhí)行通過的綠色占大部分，但仍有一些呈現(xiàn)黃色和紅色。也會繼續(xù)改進(jìn)，爭取再次提高測試覆蓋率。

?

7）計算模塊部分異常處理說明

（1）沒有輸入必須的參數(shù)-m,-n

?????①通過if判斷對這種異常進(jìn)行了處理。設(shè)計了兩個參數(shù)ifm和ifn判斷是否有-m,-n的輸入。

?????②單元測試樣例

?????③錯誤對應(yīng)場景：例如命令行沒有輸入-n或-m。發(fā)生錯誤時，會提示用戶輸入的參數(shù)中必須包含題目數(shù)量/對題目數(shù)值上下界的設(shè)定。請重新輸入。

（2）輸入的參數(shù)超出指定范圍

?????①對于這種情況我設(shè)計了參數(shù)ifrun對能獲取到數(shù)字但是數(shù)字超出范圍的情況進(jìn)行了判斷，出現(xiàn)異常時ifrun值為false。

?????②單元測試樣例

?????③錯誤對應(yīng)場景：例如命令行輸入-n 10 –m -1 3。發(fā)生錯誤時，會提示用戶各個參數(shù)應(yīng)有的界限，請用戶重新輸入。

（3）輸入的字母后沒有緊跟著對應(yīng)數(shù)量的或?qū)?yīng)形式的參數(shù)。

?????①對于這種情況用了try-catch語句判斷處理異常。輸入錯誤就會執(zhí)行catch語句中內(nèi)容，給出合理提示。

?????②單元測試樣例

?????③錯誤對應(yīng)場景：例如-n –m 1 100的輸入。發(fā)生錯誤時，會提示用戶正確的輸入形式，請用戶重新輸入。

（4）出題后，寫入文件時出錯

?????對于這種情況用了try-catch語句判斷處理異常。輸入錯誤就會執(zhí)行catch語句中內(nèi)容，給出文件出錯提示。

?

8）界面模塊的詳細(xì)設(shè)計過程

整體思路：

???①出題部分

功能如圖所示通過<form>表單進(jìn)行功能實現(xiàn)向后臺傳輸數(shù)據(jù)

???如果輸入的東西不符合要求，js會進(jìn)行判斷

②文件上傳（題目導(dǎo)入）

功能如圖，文件提交由后臺代碼實現(xiàn)

③功能轉(zhuǎn)換

這三個功能在同一個頁面上，通過js改變css樣式進(jìn)行改變。

$("#mia").click(function(){$("#xinxi").css("display","block"); $("#miao").css("display","none"); }); $("#chu").click(function(){$("#xinxi").css("display","none");$("#miao").css("display","block"); }); $("#otou").click(function(){$("#mengban").css("display","block");}); $("#cha").click(function(e){$("#chamian").css("display","block");e.stopPropagation(); }) $("#chamian").click(function(e){$("#chamian").css("display","block");e.stopPropagation(); }) $(document).click(function(e){$("#chamian").css("display","none"); });

④成績匯總

有兩個匯總，一個是全部成績，一個是最佳成績。點擊這兩個按鈕都會跳轉(zhuǎn)到同一個jsp頁面。而內(nèi)容顯示的不同由后臺代碼實現(xiàn)

全部成績

嗷，前面截圖漏了學(xué)號

各用戶的最佳成績

⑤題目頁

沒有提交之前，包括計時器（js實現(xiàn)）和題目顯示，答案寫在<input>中通過js進(jìn)行與答案的判斷

提交后出現(xiàn)答題情況的彈窗js判斷對錯，統(tǒng)計總題目數(shù)，答對題數(shù)，答錯題數(shù)，和總時間,將數(shù)據(jù)通過隱藏的<form>傳到后臺

答題情況的彈窗是可以拉動的，可以讓學(xué)生查看自己哪里答錯了，可以再做但是不可以再次提交。拉動由js實現(xiàn)

//面板拖動 var drag=document.getElementById('drag');drag.οnmοusedοwn=function(){startMove();}var oCha=document.getElementById('QQcha');oCha.οnclick=function(){var oBody=document.getElementById('mainbody');var oCha=document.getElementById('QQcha');oBody.style.display="none";}function startMove(event){event=event || window.event;var oBody=document.getElementById('mainbody');var disX=event.clientX-oBody.offsetLeft;var disY=event.clientY-oBody.offsetTop;document.οnmοusemοve=function(event){event=event ||window.event;okMove(event,disX,disY);event.preventDefault();}document.οnmοuseup=function(){document.οnmοusemοve=null;document.οnmοuseup=null;} } function okMove(e,posX,posY){var oBody=document.getElementById('mainbody');var l=e.clientX-posX;var t=e.clientY-posY;var winW=document.documentElement.clientWidth || document.body.clientWidth;var winH=document.documentElement.clientHeight || document.body.clientHeight;var maxW=winW-oBody.offsetWidth-10;var maxH=winH-oBody.offsetHeight;if(l<0){l=0;}else if(l>maxW){l=maxW;}if(t<0){t=10;}else if(t>maxH){t=maxH;}oBody.style.left=l+'px';oBody.style.top=t+'px'; }

　

9）界面模塊與計算模塊的對接。

??作為前端，我只說我負(fù)責(zé)的部分：

①計時

　

// setInterval計時器var theTime=document.getElementById('theTime');var n=0;var m=0;var f=0;var ff=0;var timert=null;function timeCount(){clearInterval(timert);timert=setInterval(function(){n=n+1;f=n/60;ff=parseInt(f) m=n%60;theTime.innerHTML=ff+" 分 "+m+" 秒";},1000);}timeCount();

　　

②判斷正誤

//判斷回答是否正確var tiJiao=document.getElementById('tiJiao'); var oBody=document.getElementById('mainbody'); var huida=document.getElementsByClassName('huida'); var daan=document.getElementsByClassName('e'); var anwser=document.getElementsByClassName('anwser'); var yesno=document.getElementsByClassName('yesno'); var emm=document.getElementsByClassName('emm'); var allnum=document.getElementById('allnum'); var alltime=document.getElementById('alltime'); var allyes=document.getElementById('allyes'); // var yes=0; // var no=0;tiJiao.οnclick=function(){var yes=0;var no=0;for(var i=0;i<huida.length;i++){anwser[i].style.display="inline-block";if(huida[i].value==daan[i].innerHTML){yesno[i].innerHTML="√";yesno[i].style.color="#1DF126";yes++;}else{yesno[i].innerHTML="×";yesno[i].style.color="red";no++;}}clearInterval(timert);

　　

③統(tǒng)計總題目數(shù)，答對題數(shù)，答錯題數(shù)，和總時間,將數(shù)據(jù)通過隱藏的<form>傳到后臺

HTML：

<form οnsubmit="return PostData()" id="form1"><input type="text" id="allnum" value="1" style="display: none;"><input type="text" id="allyes" value="" style="display: none;"><input type="text" id="alltime" value="" style="display: none;"> <input type="submit" class="quedinng" value="確定"></form> 　　

JS：

oBody.style.display="block";tiJiao.style.display="none";allnum.value=daan.length;allyes.value=yes;emm[0].innerHTML=daan.length;emm[1].innerHTML=yes;emm[2].innerHTML=no;if(theTime.innerHTML=="計時區(qū)"){emm[3].innerHTML="您沒有計時";alltime.value=0; }else{emm[3].innerHTML=theTime.innerHTML; alltime.value=theTime.innerHTML; }}

　　

10）描述結(jié)對的過程

我們的結(jié)對大約分為兩個階段，由于我們編寫的是網(wǎng)頁版，兩個人擅長的領(lǐng)域不相同

第一階段主要是一人負(fù)責(zé)前端，一人負(fù)責(zé)后端，這一過程我們相當(dāng)于是分開各自編程的，所以這里部分對駕駛員和領(lǐng)航員這種模式的切換和運用不夠明顯，每人負(fù)責(zé)自己的那部分代碼的編寫；

第二部分，進(jìn)入合頁面和兩個模塊的對接過程，我們兩人一起合作，在這一階段也充分體驗了結(jié)對編程兩個人一起的高效之處。我們兩個人不斷切換駕駛員領(lǐng)航員角色，比較順利的完成了不同板塊的對接與項目的測試。同時也共同完成了整個項目的性能分析和單元測試的覆蓋率分析。

結(jié)對的時候，我們都要耐心傾聽，一起改bug，聽取對方的建議

11）結(jié)對編程的優(yōu)點和缺點

???結(jié)對編程的優(yōu)點：鍛煉合作能力，溝通交流能力，分工配合能力

???結(jié)對編程的缺點：兩人分開干活，彼此進(jìn)度不同，代碼功能不同。合在一起不容易

???童宇欣的優(yōu)點：學(xué)習(xí)的上進(jìn)心，在最開始考慮項目功能時，她一直強調(diào)想做出附加功能

? ? ? ? ? ? ? ? ? ? ? ? ? ??強大的代碼能力，在工作室她已經(jīng)接手過幾個校級項目，對代碼熟悉

? ? ? ? ? ? ? ? ? ? ? ? ? ??耐心，合作中配合，會有不同的bug一起改

???童宇欣的缺點：真想不出來，和她配合很愉快

我的優(yōu)點：積極配合，因為是前端，更多是輔助宇欣，她想要什么功能都可以滿足

? ? ? ? ? ? ? ? ??對前端語言的熟悉，也接手過項目

? ? ? ? ? ? ? ? ??耐心，合作中配合，會有不同的bug一起改

????我的缺點：對Java語言不熟悉

?

9）在你實現(xiàn)完程序之后，在附錄提供的PSP表格記錄下你在程序的各個模塊上實際花費的時間。（1'）

?PSP　　

PSP2.1	任務(wù)內(nèi)容	實際完成需要的時間(min)
Planning	計劃	30
Estimate	估計這個任務(wù)需要多少時間，并規(guī)劃大致工作步驟	10
Development	開發(fā)	2700
Analysis	需求分析 (包括學(xué)習(xí)新技術(shù))	40
Design Spec	?生成設(shè)計文檔	20
Design Review	設(shè)計復(fù)審?(和同事審核設(shè)計文檔)	20
Coding Standard	?代碼規(guī)范?(為目前的開發(fā)制定合適的規(guī)范)	15
Design	具體設(shè)計	60
?Coding	具體編碼	1800
Code Review	代碼復(fù)審	45
?Test	測試（自我測試，修改代碼，提交修改）	700
Reporting	報告	840
Test Report	測試報告	780
? ?Size Measurement	計算工作量	30

13）項目總結(jié)與改進(jìn)

本次作業(yè)完成了所有基本功能，能夠?qū)崿F(xiàn)規(guī)定要求的出題，和帶負(fù)數(shù)的計算，同時實現(xiàn)了允許多用戶做題，并能記錄所有用戶的全部成績和最好成績。

但仍然存在很多不足之處。比如另外一個附加功能（能夠支持多語言）沒能實現(xiàn)，還有由于對每一步運算結(jié)果的范圍限制，導(dǎo)致我們的程序出現(xiàn)括號的概率變小。接下來的時間我們一定會繼續(xù)改進(jìn)我們的項目，爭取能呈現(xiàn)出更好的效果。

和宇欣合作非常棒！！她做事認(rèn)真，熱情開朗，是一個非常棒的合作伙伴！！

?

轉(zhuǎn)載于:https://www.cnblogs.com/Dear-Demon/p/8732517.html

總結(jié)

以上是生活随笔為你收集整理的结对项目-小学生四则运算系统网页版项目报告的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。