第五次软工做业结对编程

连接

github地址：https://github.com/O-VIGIA/031702414-031702444.git

结对同窗：031702414陆志阳

具体分工

031702414陆志阳：算法设计和实现，单元测试，代码优化

031702444李尚佳：前端页面设计和实现

共同完成：jstree的实现 博客内容撰写

PSP表格

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

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

读完题目，分析要点以下：

1. 文本数据的提取
2. 文本数去提取完如何保存和传送
3. 树状动态结构的生成
4. 树状结构缩放的实现

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

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

在没开始以前 咱们两个 是这么想的 （（（ ：

算法：

缩放算法：

定义 检查函数（节点）

{

检查该节点全部的父节点

若是 其全部父节点的缩放标志全为1，该节点与全部的父节点连线消失而且该节点消失

若是 其至少有一个父节点的缩放标志不为1，该节点只与缩放标志为1的父节点连线消失而且该节点不消失

}

定义 缩放函数（节点）

{

点击节点，以此节点为父节点，找到他的全部的儿子节点（第一层儿子节点），该节点缩放标志为1。

检查节点（子节点）

缩放函数（子节点）

}

主函数（）

{

缩放函数（点击的节点）；

}

在分工开始了以后我是这么想的

算法

。。。。。。。。。。。。。。

最后是则个样子？！

多行不E必自闭 ~

好了正经起来：

在打关联树的时候

比较有意思的一个算法可能就是递归查找子节点了，就是当前树的根节点和前面树的节点是否有关联

写这个算法的过程当中，由于数据是json格式，因此求父节点下一级子节点的长度就是关键。

刚开始憨憨写了个 json. length()/.size()...发现都不对，最后只能本身去手打，发现手打也没那么难

//自定义json长度查找函数,返回json树的下层子节点的长度(个数)

        function getJsonLength(jsonData) {

            var json_length = 0;

            for (var temp in jsonData) {

                //alert("Son is " + item);

                json_length++;

            }

            return jsonLength;

        }

剩下的就交给个人递归查找函数了，直接上代码，看注释

/*
        检查函数，遍历以前全部树的全部子节点，查找是否有导师的学生也是导师的状况,如有此种状况则此树重构 
        */

        //@nodes 源json树

        //@find_name 要找的导师名

        //@may_need 可能须要添加的json树 

        function check(nodes, find_name, may_need, keke) {

            var fanhui1 = 0;

            var fanhui2 = 1;

            // alert("checkcheckcheckcheckcheckcheck");

            var length_now = getJsonLength(nodes.children);

            // alert("chang = " + length_now)

            for (var ll = 0; ll < length_now; ll++) {

                // alert(nodes.children[ll].name);

                if (nodes.children[ll].name == find_name) {//第ll个子节点的名字是否与要查找的相同

                    // alert("hhhhhhhhhhhhhh");

                    quanju_flag = 1;若是有一棵树和其余树有关联此变量为一树的颗数不增长

                    //add_tree(nodes.children[ll].children, may_need, keke);

                    // alert("add");

                    // alert(getJsonLength(may_need));

                    nodes.children[ll] = may_need;//将该json树添加到儿子节点做为关联

                    // alert("add success");

                    return fanhui2;

                } else {

                    check(nodes.children[ll], find_name, may_need, keke);

                    // return;

                }

            }

            return fanhui1;

        }

其余的地方，也就是搞json的时候的常常犯傻，不过最后仍是渐渐清晰了。

有关树的生成，我把队友的画图代码封装成函数，用json数据存放成当前全部的树，最后一块儿生成防止生成关联树以后又生成关联树的子树，树的棵树用模块独立树减去关联树统计画出。

详细的生成树的逻辑思想见下面的流程图@lxy

贴出你认为重要的/有价值的代码片断，并解释

alert("宇宙最有价值的代码");

这就是最有价值的代码☝

正经一点开始正题

在上面的“算法的关键与关键实现部分流程图 ”我其实已经列出了一些代码都是一些功能函数

最有价值的就是主函数代码把，它。。多累啊

解释看注释和上面流程图

//追逐函数

        /*
        分割传输过来的数据并构造json树结构
        至关于主函数功能
        */
        function chase() {
            var count = 0; //定义儿子节点的编号
            var flag = 0; //定义标志是否为关联树值为1
            var all_data = document.getElementById("user").value;
            var sclice_data = [];
            var model_data = [];
            model_data = all_data.split("\n\n");
            //生成树型结构数据
            for (var j = 0; j < model_data.length; ++j) {
                //初始化变量
                count = 0;
                //flag = 0;
                quanju_flag = 0;
                count_shu = 0
                sclice_data = model_data[j].split("\n");
                for (var i = 0; i < sclice_data.length; ++i) {
                    var head_tmp = "";
                    var body_tmp = "";
                    var hb = sclice_data[i].split("："); //从冒号分割一层字符串
                    head_tmp = hb[0];
                    body_tmp = hb[1];
                    //处理冒号前的部分
                    if (head_tmp == "导师") {
                        var daoshi2 = {
                            "name": body_tmp,
                            "parent": "null",
                            "children": [{}]
                        }
                        treeData[j] = daoshi2; //将导师嵌入节点
                    } else {
                        var children = {
                            "name": head_tmp,
                            "parent": "null",
                            "children": [{}]
                        }
                        treeData[j].children[count] = children; //将年级及职业嵌入节点
                        var bodies = body_tmp.split("、");
                        //document.write("姓名：");
                        for (var kk = 0; kk < bodies.length; ++kk) {
                            var children = {
                                    "name": bodies[kk],
                                    "parent": "null",
                                    //"children": [{}]
                                }
                                //treeData.push(children);
                            treeData[j].children[count].children[kk] = children; //将姓名嵌入节点
                        }
                        count++; //第二子节点编号加一，生成下一个第二子节点
                    }
                }
                var tree_tmp = treeData[j];
                var name_tmp = treeData[j].name;
                for (num_tmp = 0; num_tmp < j; num_tmp++) {
                    check(treeData[num_tmp], name_tmp, tree_tmp, num_tmp);
                }
                if (!quanju_flag) count_shu++;//如有关联树则独立树的棵数不增长
            }
            //生成全部树
            alert("shu: " + count_shu);
            for (var i = 0; i <= count_shu; i++) {
                shuInit(i)
            }
        }

附加特色设计与展现

设计的创意独到之处以及设计的意义

• 采用透明图片做为背景，增长界面的美观感
• 左右四六分的格局，使界面显得整齐规整
• 蓝绿透明框配色，极具简约感
  -支持多颗关联树

实现思路

• 用不一样的div构建层次
• css样式使用百分比宽高绝对定位
• 算法和js操做详细请见上面的介绍

实现成果展现

• 前端输入界面：

• 生成树状结构界面：

• 家族树缩放界面：

在博客中给出目录说明和使用说明

说明你的目录是如何组织的

目录

• FT4.0

  • index.html（在chrome上运行）
  • style.css（外部样式表）
  • tree.js（生成家族书的函数）
  • background.jpg（背景图片）
  • d3.v3.min.js（d3库）

• README:使用说明文件

• 使用方式

  下载FT4.0到本地，解压后文件本地，用chrome打开index.html,在右侧文本框输入文本。

  学术家族树以文本形式输入，点击提交文本框。

• 文本格式

  输入:

  学术家族树以文本形式输入，点击提交文本框，考虑学术家族树的文本格式是这样的：

  导师：张三

  2016级博士生：天1、王2、吴五

  2015级硕士生：李4、王5、许六

  2016级硕士生：刘1、李2、李三

  2017级本科生：刘6、琪7、司四

  导师：吴五
  2016级博士生：天1、王2、吴

  2015级硕士生：李4、王5、许六

  2016级硕士生：刘1、李2、李三

  2017级本科生：刘二、琪7、司四

  导师：刘2
  2016级博士生：天1、王二

  2015级硕士生：李4、王5、许六

  2016级硕士生：刘1、李、李三

  2017级本科生：刘、琪7、司四

  !!!文本最后不能换行

  其中，"导师："，"级博士生："，"级硕士生："，"级本科生："和"、"当作关键词处理；如有多组输入，中间空一行。

  输出:

  树的节点，鼠标点击后是能够缩放的。同时，支持呈现多棵树并存、两棵关联树共存等形式。

  在左侧家族树下会显示可缩放的树状结构，即生成的家族树。

测试人员如何运行你的网页

• 点击github上把文件Clone到本地，解压后便可使用，需保证上述全部文件在同一个文件夹下。
• 直接用Chrome打开indext.html，输入格式按照做业要求。
• 在右侧的文本框输入数据，点击提交文本，将会在左侧生成一棵以导师为根节点的树。支持多棵树并存以及关联树。

单元测试

说明大家选用的测试工具，是如何学习单元测试的，能出一份你本身的简易教程吗？

展现出项目部分单元测试代码，并说明测试的函数

说明构造测试数据的思路，你是如何考虑各类状况的？你如何考虑未来测试人员的刁难？

单元测试，说实话多这个东西十分的陌生，虽然在上次的数独中有单元测试的一点点模块，助教大神不给我分啊气，此次但愿助教大神。。。给点分，（憨憨只想开个玩笑，大神别搞我。此次单元测试也是相对比较简单的。

单元测试也花了很多时间，我在查找了不少js单元测试的框架以后选定了抹茶，mocha!多好的名字，我想必打起来也会和吃抹茶同样。

测试工具：mocha

我首先对个人求json树长度函数进行了测试，测试了两种状况

上图把

1子节点

2子节点的子节点

可见，虽然。。。。。可是都成功单元测试出来了，说明个人json树求长度功能仍是能够的。

而后我又对子节点查找函数进行了测试

查找 子节点的子节点 的姓名

而后出现了我快要笑死的东西

什么，居然错了，在凌晨的四点的福大，仰望床底的我不由开始了静静的思考

思考后而且和前面的比对以后我发现少加了东西，由于我是在单元测试.js中外部请求了函数模块，因此要加上module，鸭嘞鸭嘞，而后我愉快的加上了model。。。 -------》to be comtinue

这个这个我竟看了老半天才发现，真的是xsl

测试成功，在全部子节点中以及子节点的子节点等等能够找到了名字为“yyy”的同窗

而后我测试一下在全部的子节点中找到 陆小爷 同窗

果真，找不到陆小爷同窗，由于他打软工去了。

测试成功。时间缘由没有过多测试。

重点来了，下面多是最入门级的单元测试教程

我仔细的浏览了一下博客做业中给出的mocha教程，发现很不容易上手（就是菜）

上手的教程在这哈哈哈哈哈

首先在电脑上安装node环境，而且配置环境变量path，(固然能够选择msi自行配制)

配置好以后就能够愉快的用npm命令啦，npm install mocha安装抹茶

配置抹茶.bin目录到path环境变量，而后就能愉快的运行你的test.js代码

关于断言的单元测试代码能够参考博客做业的教程。

//对单元测试当时爱了两个小时

构造单元测试的思路，和应对将来的刁难

思路清晰：

测试json长度为例，测试完根结点的长度，是否能测出子节点的长度呢。

查找子节点，是否能遍历全部子节点进行查找呢

应对刁难：

若是咱们角色互换，我会让你看看什么叫残忍！

//多学习，多作事。作到足够优秀，代码足够健壮。

贴出Github的代码签入记录

你觉得是这样，我也想

他其实长这样

遇到的代码模块异常或结对困难及解决方法

• 问题描述：树状结构难以实现。
• 尝试：学习VUE，D3等框架，寻找相似树状可折叠结构的模板，学习API使用。
• 是否解决：已解决。
  
  
• 问题描述：界面设计简单简陋，不堪入目，html+css不熟练。
• 尝试：普遍寻找优质界面，并借鉴学习，在B站和菜鸟教程寻找入门教学资源，一步步慢慢学习创建。
• 是否解决：已解决

• 问题描述：没法与界面树进行数据交互

• 尝试：学习json，用json作结构

• 是否解决：已解决

  
  

• 问题描述：对json彻底不了解

• 尝试：打码测试，测试节点，测试遍历等等learning by doing

• 是否解决：玩6了

  
  

• 问题描述：太瞌睡

• 尝试：拉着队友一块儿熬夜

• 是否解决：已解决，两人均变憨憨

评价队友

• 值得学习的地方

  认真努力，勇于攻克难关，责任心强，编码能力强，自学能力强。

• 须要改进的地方

  喜欢花里胡哨的东西，在基本代码还没实现以前就想要搞事情。（兄嘚，猥琐发育别浪）

六组测试

数据一：

导师：张三

数据二：

导师：张三
2016级博士生：天一
2015级硕士生：李四
2016级硕士生：刘一
2017级本科生：刘六

数据三：

导师：张三
2016级博士生：天1、王2、吴五
2015级硕士生：李4、王5、许六

数据四：

导师：张三
2016级博士生：天1、王2、吴五
2015级硕士生：李4、王5、许六
2016级硕士生：刘1、李2、李三
2017级本科生：刘6、琪7、司四

数据五：

导师：张三
2016级博士生：天1、王2、吴五
2015级硕士生：李4、王5、许六
2016级硕士生：刘1、李2、李三
2017级本科生：刘6、琪7、司四

导师：吴五
2016级博士生：天1、王2、吴
2015级硕士生：李4、王5、许六
2016级硕士生：刘1、李2、李三
2017级本科生：刘二、琪7、司四

数据六：

导师：张三
2016级博士生：天1、王2、吴五
2015级硕士生：李4、王5、许六
2016级硕士生：刘1、李2、李三
2017级本科生：刘6、琪7、司四

导师：吴五
2016级博士生：天2、王4、吴六
2015级硕士生：李1、王8、许七
2016级硕士生：刘3、李8、李二
2017级本科生：刘1、琪8、司四九
导师：刘2
2016级博士生：天4、王九
2015级硕士生：李四
2016级硕士生：刘一
2017级本科生：刘一

长路漫漫，队友做伴