【2019.10.17】十天Web前端程序员体验（软件工程实践第五次做业）

时间 2020-05-21

标签 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/
远不止这些，列出部分供你们参考