终于弄好了 homework-09

近一周的时间，顶着编译大作业严重搁置的压力，天天搞，终于把网页动态展示的搞出来了！恩，还挺好看~

因为是最后一次作业了，也是因为天生的完美主义强迫症，做到自己满意才放心停下来。不过，这个过程，看着同学都去测试编译了，我才写了语法分析，真的是压力山大。现在做出来的心情，就是从战场活下来的轻松与兴奋 T^T

闲话少叙，下面展示作品，希望大家喜欢。

网页发布在这个链接：happyjin.com/show/index.html

1. 外观设计及使用说明（一定亲自操作一下才能看到动画效果）

上方，Dynamic Show的标题以及网站主题的简介，采用扁平化风格，清晰干净的观感。因为页面太长，我在这里剪短一下。下面的就是控制和展示部分。

界面具体介绍如下：

1. 控制部分，分为 Mode, Input 和 Control三部分。用户在前两部分指定模式和输入，在最后一个部分操作展示控制，逻辑清晰。

2. 这里面展示普通，水平及竖直联通，轮胎装联通4种模式。因为/A模式采用的是退火算法，这种随机化的过程不仅步骤太多，也没有什么算法逻辑可讲，故不适合这样的动态展示。

3. 输入支持随机化自动输入（需要填写一个维度），和文件读取。但是，文件读取只兼容经过权限设置的某些版本的IE，故意义不大，这里只进行到读取文件并弹窗的状态，展示一下ActiveXObject的应用技术好了。

4. 控制部分有自动跳步开关（动画切换），还有恰好被设计在一起的前后跳步按钮。开始计算后即可方便的导航。

5. Output下面黄色区域初始显示“Current Sum”，演示开始后便动态显示当前的子数组和。

6. 下方的表格显示扫描过程。表格在开始之前是不存在的，重新开始也会重新绘制。绿色部分，是当前算法聚焦的部分。这个算法就是考虑到，新增一个元素到数组末尾，那新的最大子数组要么不变，要么以新元素结尾。绿色展示了根据新增元素的想法进行扫描的过程。在绿色部分之内，算法用动态规划利用中间变量迅速求需要部分的部分和。

　　然而，不是每个扫描到的区域都被选中保留，因为算法是对比取优的，那么黄色的部分就显示我们保留的部分的和。当黄色区域的值变化，用户就知道当前的绿色区域被选中了。这样要比黄色区域显示绿色区域的和要更有意义，因为用户其实并不会去算部分和，只要知道什么时候更新选区就可以了，用户关心的是算法的聚焦目标的变化，这也是不好理解，需要展示的部分。

细心的设计：

1. 当用户选择自动输入或文件输入时，相应的输入框会有变化，巧妙提示用户该输入哪里；另一个输入框被禁用，避免了误输入。比如，当我们选择随机产生数值，那文件路径的输入框就不可编辑。

2. 考虑到很多用户只需要理解一下算法，那我们就设置了默认选项，这使得用户只需要输入一个维度，然后按一下最醒目的按钮“Let's Go!!!”，就可以自动逐步显示，非常方便。

3. 在运行过程中，可以随意换输入重开始，可以随时开关自动跳步，可以在自动跳步的同时前进和后退。

2. 技术实现

1. 我在W3School上学习了html, javascript, jquery三个课程，并读了bootstrap框架的一些代码。随后，选择了Flat-UI这个框架，读懂了其代码，并用Flat-UI实现了主页html文件。

2. 我编写了js/shonejin.js这个文件，里面包含调度动态效果的事件处理函数，以及算法展示的各种函数。

3. 代码质量

第一次写javascript，代码质量其实和C++要求是不太一样的。

1. 代码风格上，变量命名采用骆驼命名法，函数首字母大写。空间上，有整齐的缩进，保证可读性强。当然，实际发布的js文件为了传输迅速，是把空白符号全去掉的。

2. 注释：首先，变量和函数名已经力求有一定的自解释性能（如上图），其次，各个变量均有言简意赅的注释，每个函数有注释，说明其使用场景和作用，以及必要的参数说明。

对于难以理解的算法，在程序之中也有必要注释。

3. 结构：首先，相关函数划分到本js文件中是科学的，还有一些其他的控件效果函数，直接到框架包里面修改了。

其次，函数的划分按照其相应不同DOM实践的逻辑划分，给理解和修改带来便利，也方便html文档中写其onclick等函数。这些函数，要尽量少得耦合。

对于算法实现的函数，因为算法就是不断使用归结法，那么函数之间的重用性很高，显得很简洁清晰。

3. 单元测试：用Qunit这个框架测试了自己写的js，效果是这样的：

但是，这种测试更适合测最小子数组的部分函数，而DOM事件处理的函数无参数无返回值，我选择使用Chrome或Safari浏览器的控制台调试，不仅能看到错误，还能看到其错误的行数。

例如下面的截图：

4. 屏幕录制

我的两篇博客：http://www.cnblogs.com/shone/p/3330268.html， http://www.cnblogs.com/shone/p/3348372.html

分别从一维子数组、二维子数组介绍了动态规划，那里面介绍的非常详细，便不在此处赘述。为了更加形象的展示算法的执行过程，

我使用LICEcap制作了gif动画。下面两个动画作为事例，分别是normal模式，和水平连接的拓展模式。我也会将gif更新到原来两篇博客里，方便大家学习。

水平连接模式：

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