2020软件工程作业05

2020年软件工程作业05

这个作业属于那个课程	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
这个作业的要求在那里	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
这个作业的目标	多行文本框输入数据，根据数据构建出家族树
作业正文	https://www.cnblogs.com/Dominator/p/12722097.html
其他参考文献	百度资源、同学讲解

一、Github地址

地址：https://github.com/0dominator/20177617-20177645

二、具体分工

欧阳志强：具体代码编写
孙嘉：查阅资料和博客园编写

三、PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	20
Estimate	估计这个任务需要多少时间	480	600
Development	开发	20	30
Analysis	需求分析 (包括学习新技术)	20	20
Design Spec	生成设计文档	10	10
Design Review	设计复审	10	10
Coding Standard	代码规范 (为目前的开发制定合适的规范)	10	30
Design	具体设计	60	120
Coding	具体编码	180	200
Code Review	代码复审	30	30
Test	测试（自我测试，修改代码，提交修改）	15	15
Reporting	报告	10	10
Test Repor	测试报告	10	10
Size Measurement	计算工作量	20	20
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	20	20
合计		500	600

四、解题思路描述与设计实现说明

代码组织与内部实现设计（类图）

说明算法的关键与关键实现部分流程图
算法的关键：

1. 对于输入数据的处理。
2. 将处理后的数据形象体现出来，用了ul、li的结构形式。（网上的那种tree结构真的不敢用，太多人代码、效果图相似了）

过程流程图

认为重要的/有价值的代码片段，并解释

处理数据，并形成ul、li结构

 1 //s1、s2作为id的值
 2     var s1=1000;
 3     var s2=9999;
 4     function f1() {
 5         //获取文本数据
 6         var a=document.querySelector("textarea");
 7         //判断数据是否为空
 8         if(a.value==""){
 9             alert("输入不能为空！");
10         }
11         if(s1==1000){
12             document.getElementById("show1").innerHTML="一键全收缩";
13         }
14         //对于多组输入以”\n\n“切割
15         var aa=a.value.split("\n\n");
16         for(var i=0;i<aa.length;i++){
17             var uli=document.createElement("ul");
18             uli.id=s2.toString();
19             //将ul按规律加入到规划好的div中
20             switch (s2%3) {
21                 case 0:{
22                     document.getElementById("text1").appendChild(uli);
23                 } break;
24                 case 1:{
25                     document.getElementById("text2").appendChild(uli);
26                 } break;
27                 case 2:{
28                     document.getElementById("text3").appendChild(uli);
29                 } break;
30             }
31             //对于每组数据以”\n“切割
32             var b=aa[i].split("\n");
33             for(var j=0;j<b.length;j++){
34                 if(j==0){
35                     document.getElementById(s2.toString()).innerHTML=b[j];
36                     continue;
37                 }else{
38                     var c0 = b[j].split("：")[0];
39                     var c1 = b[j].split("：")[1];
40                     var d = c1.split("、");
41                     var li = document.createElement("li");
42                     var ul = document.getElementById(s2.toString());
43                     ul.appendChild(li);
44                     li.innerHTML = c0;
45                     var ul = document.createElement("ul");
46                     //将s1赋给ul的id，然后自减
47                     ul.id=s1.toString();
48                     s1--;
49                     li.appendChild(ul);
50 
51                     for (var k = 0; k < d.length; k++) {
52                         var li = document.createElement("li");
53                         ul.appendChild(li);
54                         li.innerHTML = d[k];
55                     }
56                 }
57             }
58             s2++;
59         }
60     }

收缩、扩展点击事件

 1 document.getElementById("show1").onclick = function () {
 2         if (this.innerHTML == '一键全收缩') {
 3             this.innerHTML = '一键全展开';
 4             for (var i=1000;i>=s1;i--) {
 5                 var con = document.getElementById(i.toString()).style;
 6                 con.display = 'none';
 7             }
 8             return false;
 9         }else {
10             this.innerHTML = '一键全收缩';
11             for (var i=1000;i>=s1;i--) {
12                 var con = document.getElementById(i.toString()).style;
13                 con.display = '';
14             }
15             return false;
16         }
17     }