JavaScript 初探

初次学习JavaScript，用JS写了一个计划表生成工具。

项目链接：计划表生成工具

JavaScript是一个神奇的语言。它既不像Java原生地支持类和继承，也不如Python声明变量方便，更兼闹出"===“这样的麻烦。但我依旧深知它的强大，尤其是在可视化这一方面，在接触qtwebengine的时候已经感受过一次了。目前，我学习JS的平台是W3Schools 和廖雪峰的网站。

话说这是我自学JS以来写的第一个程序，求轻虐(￣▽￣)

我的初衷

我的初衷是制作一个习惯统计工具，用来分析我在长期计划上的坚持能力。于是照例我对它做了一个需求分析。

习惯统计工具的需求分析：

• 需要用户能够注册。即能够声明我是谁，并且把我和我的数据绑定。
• 需要将数据存在文件里，而不是存在缓存文件里。
• 需要按时间戳对生成的数据进行统计。
• 需要对最终结果制作统计图表。

通过分析，我发现静态网页很难实现第一第二步。能不能实现我不敢下定论，但肯定有技术难度。目前，我只有一个由GitHub page托管的静态网页，因此我选择退而求其次。先学习生成一个单一的表格，来记录当天计划的执行情况。我把这个工具叫做计划表生成工具。

需求分析

计划表生成工具好比是习惯统计工具的一个子系统。习惯统计工具面向的是连续多天，而计划表生成工具只面向单独一天。

计划表生成工具的需求分析：

• 一个UI界面（前端）
• 一个允许用户做输入、选择和修改操作的数据流（后端）
• 一个最终显示的表格（前端）
• 判断此工具是否easy to use，找到不好用的因素并改进 （测试）

此时我们的big picture就已经明确。战略定了，下面来定战术。

步骤分析

（一）添加计划

对于前端UI，首先我们需要一个textarea，用来接收每项计划的内容。还需要一个按钮，点下这个按钮时，将文本框内的信息添加到计划列表。为了便于存储，我为计划(item)设计了一个类。

这个类的声明如下：

var Items = {
　　　　	name: "",
　　　　	isCheck: "false",
		   isDelete: "false"
	};

可以看出这个类有三个值。它们分别表示该对象的名称，是否完成，以及是否删除。每次添加计划，用以下代码实例化这个类(items)，生成一个对象(item)：

var item = Object.create(Items);

（二）生成表格

这一步要把复选框(checkbox)和按钮(button)都和每一行的计划绑定。那么如何绑定呢？

要知道，用for loop遍历subArray的过程，就是生成表格内容的过程。所以，checkbox和button也都是在这次遍历中生成的。那么，我们就可以在它们的生成过程中，创建它们的id，并把id和计划对应起来。

具体到代码中，我用了i.toString(10)将循环数转成string类型，然后加到id上。于是，第一项计划对应的checkbox的id就是"cb0”, 对应的button的id就是"btn0", 以此类推。

for (i = 0; i < subArray.length; i++) {
	var index = i+1;
	body += '<tr>';
	body += '<td>' + index.toString(10) + '</td>';
	body += '<td>' + '<input type="checkbox" id=\"cb' + i.toString(10) + '\" onclick="isChecked(this);">' + '</td>';
	body += '<td>' + '<input type="button" id=\"btn' + i.toString(10) + '\" onclick="isDeleted(this);">' + '</td>';
	body += '</tr>';
}

然后在勾选复选框或者删除的时候，只需要把前面的"cb"和"btn"去掉，剩下的数字i带入subArray()，得到的subArray(i)就表示着该checkbox或者button对应的计划。

（三）下载表格

这一步在我编程之前，还不知道用什么方法实现。最后被我查到了一段代码，它能在静态网页下生成文件并提供下载。

	function download(filename, text) {
		var element = document.createElement('a');
		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
		element.setAttribute('download', filename);

		element.style.display = 'none';
		document.body.appendChild(element);

		element.click();

		document.body.removeChild(element);
	}

技术总结

总体来说，这三步都不困难。我花了大约8小时写这个project，其实还是吃亏在初学。前期两小时左右，在画图、规划、分析、简化功能……直到把野心降低到我能完成的程度。接着连续编了四小时的程序，整个项目就从无到有做出来了。然后又花了一些时间修改CSS，美化页面。第二天上午又花了近两小时，把Enter键变成“添加计划”的快捷键，并用Shift + Enter替代原本Enter键的功能。这是easy to use上的改进。

食用指南

点这里打开工具。

使用说明：

1. 在文本框中输入你的计划，点击“添加计划”按钮，将你的计划添加至计划列表。
2. 点击“生成表格”按钮，生成计划表。通过勾选表格中的复选框，告诉后台你的完成情况。
3. 点击“下载表格”按钮，下载计划完成统计表。

输出结果：

操作演示：

附录

主要函数和变量之间的关系：