【2019.10.17】十天Web前端程序員體驗（軟件工程實踐第五次做業）

時間 2019-11-26

標籤 2019.10.17 十天 10天 web 前端程序員體驗軟件工程實踐第五欄目 HTML 简体版

原文原文鏈接

結對信息、具體分工

Github地址：https://github.com/MokouTyan/131700101-031702425javascript

學號	暱稱	主要負責內容	博客地址
131700101	莫多	代碼編輯、文字內容	http://www.javashuo.com/article/p-mvnifywi-by.html
031702425	永銘	UI設計、概括總結	http://www.javashuo.com/article/p-ficdbtgb-w.html

PSP表格

	Personal Software Process Stages	預估耗時	實際耗時
Planning	計劃	0	0
Development	開發	60	500
Analysis	需求分析（學習新技術）	600	1200
Design Spec	生成設計文檔	0	0
Design Review	設計複審	60	60
Coding Standard	代碼規範	60	60
Design	具體設計	60	60
Coding	具體編碼	180	600
Code Review	代碼複審	180	180
Test	測試	180	180
Reporting	報告	60	120
Test Repor	測試報告	60	120
Size Measurement	計算工做量	0	0
Postmortem	過後總結	180	180
Process Improvement Plan	提出過程改進計劃	60	60
Estimate	這個任務須要多少時間	1740	3320

其實我以爲這個表格歧義挺多的，「開發」，「具體編碼」，「代碼複審」、「具體設計」、「代碼規範」這三個感受就是同義詞css

這個表格我以爲能夠壓縮一下的，對填寫者感受很是不友好html

解題思路、設計實現

主頁面展現：

難點分析：

經過分析題目總結出如下幾個難點前端

如何獲得文本輸入框的內容
如何處理輸入的文本數據
如何將數據生成學術家族樹
如何將樹形結構轉化爲動態
如何生成多棵樹在同一頁面展現

組員基礎能力：

莫多：會HTML5與CSS的基礎語法，但對JS徹底沒有接觸過
永銘：會HTML5的基礎語法。對於CSS和JS徹底沒有接觸過vue

「生成學術家族樹」：

關於第四五難點，在大量進行搜索引擎的查找後，html5

最後肯定使用D3.JS——數據可視化的JSON來解決本次的問題。java

在通過週末一天的學習後，才認識到想要在這麼短的時間去掌握這個插件太過消耗時間，node

想要零基礎在這十天完成這個項目絕非易事！jquery

最後只好百度去查找是否有前人有思考過這個問題，git

通過大量的查找與篩選，最後找到一例是可讓咱們滿意的。

生成樹的動態效果是讓咱們滿意的，可是生成這棵樹的數據並不是是咱們想要的而且是固定的，

不是根據輸入要求而進行改變的，咱們還要學着如何將其修改數據

在閱讀前人的代碼後，不只對D3.JS有了更深入的認識，

而且對JS的語法以及JSON的組成有了新的瞭解，花的時間雖長但收穫良多~

「獲得文本輸入」：

關於第一點難題，「如何獲取在文本框輸入的文本內容」

這一點挺好解決的，咱們使用了jquery.js來解決這個問題

將輸入的文本都保存在一個變量中

「處理輸入的文本」：

咱們在搜索問題的解決方案的時候，前期容易大量的漫無目的搜索，

由於這部分JS的只是對咱們來講徹底就是新的知識，困難的是要用什麼關鍵詞去搜索問題，

而且還要參考不少別人的代碼，去完善本身的代碼，這個過程是很是痛苦的！

因此咱們在完成第二個問題的時候就吃了不少的苦頭，

由於生成樹的過程是用到它本地自帶的數據格式的，

由於咱們只能從樣式上更改樹，因此在數據上沒法按照咱們所想的數據格式去導入這棵樹

數據的結構相似於JSON，可是咱們都並不知道這是JSON的格式，

因而就用{}、[]、數組這樣的關鍵詞查找，能得知這是JSON格式也是純屬偶然。

最後在找到的資料中找到最適合咱們的方法是JS函數中的spilt()來解決這個問題，

還有如何將得到到的數據放入到咱們的數據中，最後使用的是push()的方法將獲得的對方逐一放入數組中

這就產生了新的問題了，那就是遇到同名的數據，如何將同名的數據合併，

那就首先要遍歷全部數據中的對象，對象中的數組，數組中的對象，

這部分的知識是我一直找不到的，由於不知道用什麼關鍵詞去查找

因此咱們先將數據中先抽離出第一層的數據，

那就是「本科生」、「碩士生」、「博士生」，即「導師——學位——年級——姓名」，

這樣的樹形結構會比「導師——年級——學位——姓名」這樣的結構清晰得多

因此咱們將三個學位的名字標爲sign一、二、3，由於JS中沒有布爾值，

同時咱們也不會如何遍歷數據獲得數據是否已經在數據中有同名的存在，

因此在if中咱們用三個標誌位來表明三個學位是否已經存在

若是標誌位爲真，那麼就創建一個大的學位數組放入導師對象中，再將年級以及學生對象逐一放入學位數組中，

若是標誌位爲假，就將年級以及學生對象放入已經存在的學位數組中，解決了產生多個學位數組的冗餘數據。

「多棵樹同頁展現」：

最後思考的是「如何生成多棵樹在同一頁面展現」，這個讓咱們思考了好久，

即要先對數據進行處理後獲得另外一棵樹的內容，在頁面中產生新的DIV部分來展現

起初是想用jquery.js來產生新的塊，塊中產生新的樹，

可是由於找不到相關的資料只能草草做罷，這即是咱們十天來所盡的最大努力了

JS以及不少的前端知識咱們還只是初入茅廬，此次的結對訓練讓咱們熟悉了不少JS的語法，

以及讓咱們掌握了F12控制檯的使用，雖然過程很辛苦，可是學到這麼多的內容仍是挺開心的

設計與展現

主頁面內容：

參考學習的代碼會放在下面的連接中，這裏展現的是咱們本身寫的代碼內容

首先就是在body上加入

<div id="textbody" style="position: fixed;top: 10px;right: 10px;z-index: 9999;padding:5px;">
    <textarea placeholder="在這裏寫入以下內容：
導師：張三
2016級博士生：天1、王2、吳五
2015級碩士生：李4、王5、許六
2016級碩士生：劉1、李2、李三
2017級本科生：劉6、琪7、司四
...

而後點擊「生成學術家族樹」按鈕
可經過鼠標拖動、滾輪進行縮放展現

↓快按下這個按鈕試試吧(`・ω・´)！！↓" required></textarea>
    <div><button id='begin' style="width:500px;">生成學術家族樹</button></div>
    </div>
<div style="position: fixed;right: 10px;bottom:10px;z-index: 9999;padding:5px;text-shadow:2px 2px 0px #fff;font-size: 24pt;">Made by&nbsp&nbsp&nbsp&nbsp&nbsp莫多、&nbsp永銘<br>Last upload 2019.10.18</div>

定義要調用的函數，以Begin爲標誌

數據處理：

在下方script中加入，運用了一點兒的jquery

$("#begin").click(function() {
    let text = document.getElementsByTagName('textarea')[0].value
    let line1 = text.split(/[(\r\n)\r\n]+/) // 根據回車分割
    if (line1.length == 1) {
        line1 = ['導師：張三', '2016級博士生：天1、王2、吳五', '2015級碩士生：李4、王5、許六', '2016級碩士生：劉1、李2、李三', '2017級本科生：劉6、琪7、司四']
    }
    let teacher = line1[0].split('：')
    let sign1 = 1
    let sign2 = 1
    let sign3 = 1
    let teacherObj = {
        name: '',
        children: []
    } // {老師:{本科生:{2017:學生}}}
    let studentObjList = [] // {2017:學生}
    let gradeObjList = [] // {本科生:{2017:學生}}
    let boshishengObjList = []
    let benkeshengObjList = []
    let shuoshishengObjList = []

    //////
    for (let i = 1; i < line1.length; i++) {
        let student = line1[i].split('：') //獲得學生的名單
        let degree = student[0].split('級')[1]
        let grade = student[0].split('級')[0]
        let students = student[1].split('、')

        // 封裝，將學生包含到年級裏
        studentObjList = []
        ////
        for (let i = 0; i < students.length; i++) {
            let obj = {}
            obj.name = students[i]
            studentObjList.push(obj)
        }
        ////
        gradeObjList = []

        gradeObjList.name = grade + '級'
        gradeObjList.children = studentObjList
        //teacherObj.children.push(gradeObjList)  // 插入其餘年級及屆數
        if (degree === '博士生') {
            if (sign1) {
                boshishengObjList = []
                boshishengObjList.name = '博士生'
                boshishengObjList.children = gradeObjList
                boshishengObjList.children.push(gradeObjList)
                teacherObj.children.push(boshishengObjList)
                sign1 = 0
            } else {
                boshishengObjList.children.push(gradeObjList)
            }

        } else if (degree === '本科生') {
            if (sign2) {
                benkeshengObjList = []
                benkeshengObjList.name = '本科生'
                benkeshengObjList.children = gradeObjList
                benkeshengObjList.children.push(gradeObjList)
                teacherObj.children.push(benkeshengObjList)
                sign2 = 0
            } else {
                benkeshengObjList.children.push(gradeObjList)
            }

        } else if (degree === '碩士生') {
            if (sign3) {
                shuoshishengObjList = []
                shuoshishengObjList.name = '碩士生'
                shuoshishengObjList.children = gradeObjList
                shuoshishengObjList.children.push(gradeObjList)
                teacherObj.children.push(shuoshishengObjList)
                sign3 = 0;
            } else {
                shuoshishengObjList.children.push(gradeObjList)
            }
        }
    }
    //////

    teacherObj.name = teacher[1]

    console.log(line1)

    treeData = [] //把數據置爲空
    treeData.push(teacherObj) //放入數據
    root = treeData[0]
    update(root) //調用D3.JS
});

這部份內容是用來處理數據用的

console.log()語法是方便在控制檯查看的

樣式調整：

<style>
    .node {
        cursor: pointer
    }

    .node circle {
        fill: #357cae;
        stroke: #4682b4;
        stroke-width: 3px
    }

    .node circle:hover {
        transform: scale(1.1)
    }

    .node rect {
        transition: all .5s;
        fill: #2990ca;
        stroke: #4682b4;
        stroke-width: 1.5px
    }

    .node rect:hover {
        transform: scale(1.1)
    }

    .node text {
        font: 20px sans-serif
    }

    .node text:hover {
        font-weight: 700;
        transform: scale(1.05)
    }

    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 4px
    }

    .link:hover {
        transition: all .5s;
        stroke: #4d4d4d
    }

    body {
        display: block;
        margin: 8px;
        background-image: url(src/background.jpg);
        background-position: bottom 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover
    }

    html {
        overflow-x: hidden;
        overflow-y: hidden
    }
</style>

目錄組織、使用說明

目錄說明：

咱們在js、css、fonts、src的文件夾中放入了全部資源

使用說明：

下載資源後，打開index.html文件便可使用

要保證其餘文件夾也在其中，都是引用本地相對路徑的文件

單元測試

測試工具：

咱們使用的是Chrome瀏覽器的F12工具臺進行測試

在這裏推薦看一下教程：http://www.javashuo.com/article/p-tvcungud-w.html

測試代碼：

在代碼中使用console.log()的命令檢查數據分割的正確性

由於在測試的前期咱們沒法得知到底指令對不對

有了這個工具後咱們確實加速了不少的進度

這是本次實驗最大收穫的一部分，掌握了Chrome控制檯的使用

測試思路：

咱們的最大缺點就是沒法生成多棵樹，由於咱們能力實在有限

其次就是同名問題的存在，沒法獲得最高學歷

咱們的語法還有一個致命的缺陷就是分兩次輸入相同年級的人沒法合併在一塊兒

測試的數據太多的話會致使每一個地方很擠

因此咱們用了zoom的函數進行縮放方便於查看

這是咱們的缺點，正常的輸入測試是沒什麼問題

異常或結對困難及解決方法

問題描述：

這部份內容請看本頁面的「解題思路、設計實現」

作過哪些嘗試：

嘗試過vue.js與d3.js的結合，以及嘗試jquery的結合

產生新的塊，在新的塊中生成新的學術家族樹

是否解決：

vue.js與d3.js的結合，但最後以失敗了結

與jquery的結合，可是結合並非很緊密，jquery只起到了調用做用

有何收穫：

瞭解了很是多的關於js的內容，使咱們的知識層面再也不僅限於html5與CSS

Chrome控制檯的具體操做

結對感覺、隊友評價

莫多的體驗：

之前我老是會比較輕視前端的工做，認爲那是設計感比較強的人、代碼能力較弱的人去完成的

由於我以前接觸的前端語言比較多的是HTML5和CSS，用的都是標記語言而不是一些富有邏輯性的代碼

可是通過本次結對做業後，我對前端的學習有了新的認識，前端的學習一樣須要大量的學習！

永銘的體驗：

從這一次的結對做業中，我感覺到了自學方法、途徑以及效率的重要性

本身以往沒有遇到過須要咱們在這麼短的時間內自學這麼多的東西的狀況

因此在這一次的自學過程當中，不少方面是不及格的，是絕對不達標的

對於我來講，這一次的做業絕對是不成功的，本身沒有在此次做業中幫上太多的忙

須要改進的地方：

莫多比較不擅長表達本身的想法，要思考好久，不擅長溝通，但都能試着提出解決方案和意見

永銘在各方面的基礎都比較弱，在自學階段須要付出的努力和時間要比別人更多，雖然可以堅持下去，可是效率不高，每每會把任務壓到最後時刻再進行

參考連接

標題	網址
Chrome——F12 谷歌開發者工具詳解	http://www.javashuo.com/article/p-tvcungud-w.html
D3 gallery	https://github.com/d3/d3/wiki/Gallery
D3 wiki	https://github.com/d3/d3/wiki
D3.js樹圖(Tree)展開和摺疊	https://blog.csdn.net/qq_26562641/article/details/77480767
D3.js之樹形摺疊樹	http://www.javashuo.com/article/p-dnqidzrl-bz.html
JavaScript中split()方法詳解	http://www.javashuo.com/article/p-fkebgdoi-dw.html
JavaScript push() 方法詳解	http://www.fly63.com/article/detial/1187
html的標籤點擊觸發js函數的3種方法	https://blog.csdn.net/zymx14/article/details/62424377
如何在項目中使用D3.js	https://blog.csdn.net/qq_34414916/article/details/80026180
如何快速查找一個值是否存在,不存在再push()!	https://bbs.csdn.net/topics/200077079
D3.js選擇元素和綁定數據	https://blog.csdn.net/qq_34414916/article/details/80026813
查詢json字段，返回包含指定屬性的json數據	https://bbs.csdn.net/topics/392406430
D3.js作一個簡單的圖表	https://blog.csdn.net/qq_34414916/article/details/80029352
js遞歸遍歷樹形json數據	https://blog.csdn.net/axIsMyName/article/details/100202043
D3.js交互式操做	https://blog.csdn.net/qq_34414916/article/details/80035695
JS獲取頁面窗口大小解讀	https://blog.csdn.net/dearbaba_8520/article/details/82585749
D3.js中各類精美的圖形	https://blog.csdn.net/qq_34414916/article/details/80035926
js窗口尺寸獲取經常使用屬性	https://blog.csdn.net/csdnxcn/article/details/77886499
D3.js的v5版本入門教程	http://www.javashuo.com/article/p-rxghsnsn-kc.html
js經常使用JSON數據操做	http://www.javashuo.com/article/p-fxrsvcnt-ck.html
D3力導向圖	https://blog.csdn.net/qq_34414916/article/details/80036679
js中==和===區別	http://www.javashuo.com/article/p-afawqgnl-cr.html
jQuery 教程 \| 菜鳥教程	https://www.runoob.com/jquery/jquery-tutorial.html
js數組對象push前怎麼判斷是否存在該元素	https://segmentfault.com/q/1010000019985464
Json數組刪除	http://www.javashuo.com/article/p-ojrzgahj-cx.html
js中建立和調用json	https://blog.csdn.net/Hel1o_world/article/details/82227099
html5加js實現本地文件讀取和寫入並獲取本地文件路徑	https://blog.csdn.net/qq_36547601/article/details/79675948
js實現以最簡單的方式將數組元素添加到對象中的方法	https://www.jb51.net/article/130997.htm
js中[]、{}、()區別	https://blog.csdn.net/qq_20069429/article/details/83267887
js 建立數組方法以及區別	http://www.javashuo.com/article/p-qvtcztyb-dd.html
JS-JS建立數組的三種方法	http://www.javashuo.com/article/p-tqvxjqpi-dn.html
全局 CSS 樣式 · Bootstrap v3 中文文檔	https://v3.bootcss.com/css/
遠不止這些，列出部分供你們參考