现代程序设计 homework-09

这次作业是要求将homework-02做成一个可演示的应用，目的是为了让用户看到程序的计算步骤以及中间结果。

借此机会也学了一下JavaScript，感觉总结的地方再说吧。

用户需求&功能介绍

1. 用户用你的程序读入一个数组文件 (就像我们以前做过的那样)，显示初始状态 (就像围棋打谱程序那样)

1.1. 用户也可以自行定义数组的大小，或者要求随机生成一个数字矩阵。

2. 用户这时候有两个选择

2.1 按 单步执行 键, 在 GUI 看到你的程序是如何一步一步算出目前最大子数组的范围，当前计算到的临时子数组是在哪里，等等。最好用不同的颜色标识不同的状态。

2.2 按 自动运行 键, 在 GUI 看到程序自动运行，并自动显示过程, 每次改变状态的时候要稍作停留（例如 1 秒钟的时间）

3. 咳，我没看清楚! 这时最好有一个 倒带 / 回滚 的键, 让用户可以看清楚关键的几步。

（当然，用户可以选择是普通模式还是扩展定义的连通模式）

以上是老师所描述的用户需求，就结合下图来说说笔者是如何满足这些要求的：

------------------

关于用户输入

以上是一张运行一半的整体图（UI略粗犷吧）。首先，我们可以看到网页一开始第一行就有两个输入框以及一些按钮，稍微用一些中文以及英文的知识不难知道它们的功能。输　　入方面，用户点击随机生成生成随机的矩阵大小，这时再点击确定键就就可以自动生成一个对应大小的随机数矩阵了。当然，聪明的你可能发现下面还有一个很醒目的出入文本　　框，是的，由于笔者对于javascript的理解不够深入，不知道如何在网页中上传文件，所以就做了这么个文本框，用户可以将自己的矩阵输入到这个文本框，然后点　　　　　　　击"submit"键，之后再点击确定就能生成相应的矩阵了（输入文本格式用#隔开，头两个数表示列数以及行数，如果用户没有输入完，空格将会自动填入随机数）。

关于运行过程

笔者程序的逻辑设计是点击了确定按钮数据就已经处理完了，单步结果保存在一个history的三维数组中；因此，用户点击完确定按钮后，可以点击start按钮让自动查看程序执行过程（单步间隔为1s），在自动播放时，还可以暂停以及继续。在点击了pause按钮后，该按钮会变成resume，用户这是也可以点击下一排的>>和<<键来手动查看每步的结果。

每部过程中，黄色以及红色的区域为当前正在计算的区域，蓝色和红色的区域为当前最大值（其实就是红色是包括在正在计算区域中的答案块）。

关于模式选择

可选择模式。分别为普通的二维数组，横向循环，纵向循环。由于老师的主要目的是让用户查看动态规划的过程，因此笔者之前写暴搜求联通块最大和的就暂时没有搬过来实现。

代码规范

由于是刚学的JavaScript，编写程序的时候有很多地方没有注意，导致了一些地方最后为了满足要求没有做到很好的代码规范。在命名方面，除了一些局部的临时变量命名比较随意了一点（打起来方便，基本只用一次），其他变量的命名应该都是有一致的规范，比如函数的命名是首字名大写，中间单词的开头也要大写；相对的，一些全局变量的名字是首字母小写，中间单词的首字母大写。注释方面也写了一些，应该对读代码来说是有一些帮助的。

程序结构

本来笔者是想尽量用JQuery库（JavaScript和一些基本的HTML操作都不熟还用个毛线啊），于是乎，只有在按钮点击事件以及一些更改属性的时候才用到了JQuery里的东西。还是用很传统的面相过程的写法，以下是程序中一些主要的函数：

单元测试

这次终于是做出了单元测试了，用的qunit这么一个东西。测试用的文件如下：

测试程序代码如下：

        test("maketable", function(){

            var arr = new Array();

            for (var i = 0; i < 100; i++)

                arr[i] = new Array();

            arr[0][0] = 0;

            arr[0][1] = 0;

            arr[1][0] = 0;

            arr[1][1] = 2;

            var arr1 = makeTable("1#1#2");

            equal(arr1[1][1],arr[1][1],"yes!");

        });

        test("refresh", function(){

            equal(Refresh(),1,"yes!");

        });

        test("clear", function(){

            equal(clear(),1,"yes!");

        });

        test("wait", function () {

            var isSelect = new Array();

            isSelect[0] = new Array(0, 0, 0);

            isSelect[1] = new Array(1, 1, 1);

            var history = new Array();

            history[0]=new Array(1,1,1,1,1);

            equal(wait(0,isSelect,history), 1, "yes!");

        });

        test("work", function () {

            var arr = new Array();

            for (var i = 0; i < 100; i++)

                arr[i] = new Array();

            arr[0][0] = 0;

            arr[0][1] = 0;

            arr[1][0] = 0;

            arr[1][1] = 2;

            var isSelect = new Array();

            isSelect[0] = new Array(0, 0, 0);

            isSelect[1] = new Array(1, 1, 1);

            var history = new Array();

            equal(WorkMode1(1, 1,history,isSelect,arr), 1, "yes!");

        });

        test("update", function () {

            var isSelect = new Array();

            isSelect[0] = new Array(0, 0, 0);

            isSelect[1] = new Array(1, 1, 1);

            var history = new Array();

            equal(updateS1(1, 1, 1, 1, 1, isSelect), 1, "yes!");

        });

测试结果如下：

总结

	Personal Software Process Stages	时间百分比(%)	实际花费的时间 (分钟)	原来估计的时间 (分钟)
Planning	计划
· Estimate	· 估计这个任务需要多少时间，把工作细化并大致排序		60	30
Development	开发
· Analysis	· 需求分析 (包括学习新技术)		120	60
· Design Spec	· 生成设计文档		30	30
· Design Review	· 设计复审 (和同事审核设计文档)		30	30
· Coding Standard	· 代码规范 (制定合适的规范)		60	1
· Design	· 具体设计		60	60
· Coding	· 具体编码		240	120
· Code Review	· 代码复审		60	60
· Test	· 测试（自我测试，修改代码，提交修改）		60	60
Reporting	总结报告
Test Report 测试报告			30	30
Size Measurement 计算工作量 Postmortem & Improvement Plan 事后总结, 并提出改进			30	30

Total	总计	100%	总用时 780	总估计的用时 570

本学期的现代程序设计的作业终于是做完了（什么？还有附加题。不管了），感想就是好累好麻烦，不过确实是学了许多东西吧。我觉得这种方式挺不错的，不过这学期的确实好忙，有的是后想认真做一下作业又发现没时间了，不算什么感想，就是随便在可能是这门课最后一篇的博客里凑几句话结尾吧。