2020軟工實踐第二次結對作業

這個作業屬於哪個課程

這個作業要求在**

/homework/11277

這個作業的目標

結對實現學術家族樹的程式設計，學習前端內容和單元測試的知識

學號031802223 劉東權 031802219 林璟

github位址

psp2.1

personal software process stages

預估耗時（分鐘）

實際耗時（分鐘）

planning

計畫estimate

估計這個任務需要多少時間

3060

development

開發analysis

需求分析 (包括學習新技術)

120120

design spec

生成設計文件

2030

design review

設計複審

1010

coding standard

**規範 (為目前的開發制定合適的規範)

1020

design

具體設計

3030

coding

具體編碼

300320

code review

**複審

6060

test

測試（自我測試，修改**，提交修改）

300360

reporting

報告test report

測試報告

3060

size measurement

計算工作量

1010

postmortem & process improvement plan

事後總結, 並提出過程改進計畫

100120

合計1020

1200

專案使用了bootstrap+jquery+echarts,採用傳統的html+css+js實現。作業要求解析固定格式的字串並生成對應的學術家族樹圖，所以首先要解析字串，通過三個換行符分隔每棵樹的字串，分別解析各個字串的第一行（生成導師資訊），第二行（塊）獲得學生資訊，後面逐行獲取各個學生的技能或經歷資訊，並將每個學生的資訊存入map中，解析完每棵樹的字串後生成對應json如,]},,]}]}，再使用echarts.js生成每個json的樹圖，點選時顯示學生技能而不是展開學生節點，因為經測試，設定學生節點可展開，將每個技能或經歷作為其子節點由於echarts的緣故不夠美觀，因此將學生技能和經歷設定為點選學生節點後在左側顯示。

* 將輸入的文字轉為需要的js物件

* @param treetext 輸入的文字

*/function parse(treetext)

data.children = new array();

// 對每一行進行解析

for (let i = 1; i < lines.length; i++)

children.name = lines[i].split('：')[0];

children.children = new array();

// 對於每乙個學生

lines[i].split('：')[1].split('、').foreach(item => )

data.children.push(children);

// 當前行是技能資訊

} else

if (!map.get(name))

map.get(name).value = skill;}}

const domtext = '

'; return data;

}該函式的功能是將輸入的文字轉為需要的 js 物件。首先將文字按行分割。第一行預設是導師行，將導師的節點作為樹的根節點，之後對每一行進行解析。若前4個均為數字，則為學生列表行，因為輸入資料的分隔符比較明顯，所以直接通過 '：' 和『、』進行分割後解析。同時，為了避免後面讀入技能資訊時進行樹的遍歷，這裡將每乙個葉節點暫存到了 map 裡，這樣，後面就可以以 o(1) 的時間來更新對應節點的技能。

/**
* 檔案上傳輔助函式
*/function upload() 
/** * 檔案上傳功能

安裝並配置 node.js, 具體可參照

(可選) 國內npm源速度較慢，可以配置**映象，具體可參照

如果前端專案沒有使用npm構建，那麼需要單獨建立測試專案node init

全域性安裝mochanpm install --global mocha

將要測試的js拷貝到測試專案根目錄，並建立 test 資料夾

在要測試的js檔案中匯出要測試的函式(比如要測試parse函式)

編寫測試檔案，可參照

在根目錄輸入mocha，執行測試

describe('#global.js', () => , error);
});

利用 mocha 提供的describe 函式和 node.js 提供的 assert 進行單元測試，assert.throws代表期望丟擲異常。執行mocha後，將會自動執行所有測試(由於使用了模板字串，所以縮排有些混亂)

應對測試的刁難：得益於全域性的異常處理，對於沒考慮到的異常也會**獲並列印在繪圖區，只是提示資訊不夠友好，測試人員可以根據該異常資訊判斷問題。

問題二：測試的時候發現，通過" "拼接的字串可以通過測試，但是同樣的文字使用模板字串就無法通過測試，經過詢問同學以及大量的日誌除錯後，發現是原本以為是空行的地方被 vscode 自動加上了空格符進行縮排，導致解析不正確。最後刪去多餘的縮排後問題解決。這個小坑讓我更深入的理解了 es6 的模板字串的相關特性，畢竟平時前端寫的少，js這塊的知識也是東缺一塊西缺一塊的。

2020軟工實踐第二次結對作業

軟工實踐結對作業第二次

軟工實踐第二次結對程式設計作業

軟工實踐第二次作業

2020軟工實踐第二次結對作業

軟工實踐結對作業第二次

軟工實踐 第二次結對程式設計作業

軟工實踐第二次作業

相關推薦

軟工實踐第二次結對程式設計作業