学习编程有些日子了，照着样例写一些花瓶demo着实无聊，最想做的就是用代码实现实际中的需求，让代码真正有价值。
千山导航
千山导航是一个简洁优雅的导航站，我一直将其设为我的浏览器首页。千山导航有默认的网站分类，也可以自定义设置，不过清除浏览器数据时，会一并删除。第一次遇见千山时，满心欢喜地配置好了，结果在一次清理之后，一切都回到了默认配置，后来，我就再也没有自定义过了。这时候，我有了想法，想为千山导航做点什么。千山助手是一个用户脚本，依托于拓展Greasemonkey或者Tampermonkey，它为千山导航补充了几个实用功能。千山导航站点在实现中使用了Bootstrap和jQuery，所以这个脚本也相应使用了这两种技术。
阻止事件传播
千山导航有一个快捷键功能，按下快捷键打开相应的网站，不过在Firefox中并没有用，这应该是网站的遗留bug。此脚本往千山导航加上一个搜索框，但当搜索框输入时也会触发快捷键。一开始，我以为这会是脚本开发过程中最大的挑战，后来，一个阻止keydown事件传播的简单操作就完美解决搜索框和千山导航的兼容问题。
实现文件下载
导出备份需要将配置文件下载至本地，解决方案是利用<a>标签，先将配置字符串通过Blob对象转换成二进制数据，后使用URL.createObjectURL()方法将其作为标签<a>的href属性，使用download属性设置文件名，实现文件下载。
实现文件选择框
导入备份的时候，需要一个文件选择框，浏览本地文件进行选择，最直接的做法是使用type="file"，但是样式和千山导航的画风格格不入。一个优雅的解决方案是将type="file"框隐藏，在文件选择框所在位置使用一个普通的type="text"文本输入框冒充，同时绑定事件，当文本输入框被点击时触发隐藏的type="file"框的点击事件。如此这般偷梁换柱，既实现了功能，又美观了样式。
读取本地文件
读取选中的本地文件时，我使用了FileReader对象。FileReader对象读取文件的方式是异步的，一开始，处理本地文件的函数都是返回空字符串，这是由于代码执行至return语句时，读取文件的异步操作还没有完成。后来，使用Promise对象解决了这个问题，成功封装了函数。Promise对象是异步编程的一种解决方案，这次是我第一次接触，又是知识的盲区－_－^。
Bootstrap版本差异
我是在本地调试代码的，一点一点修改样式，当一个个功能实现了之后，最后一步，我将千山助手的代码插入至千山导航。运行后发现，一些调试好的样式乱了。这时才发现，千山导航使用的是Bootstrap3，而脚本用的是Bootstrap4，没有办法，样式错乱的部分都得改写。
一点一点，最终还是实现了这个脚本，第一次实现具体功能，还是很开心的。想一睹芳容的话，悄悄地戳这。其实，几个月前，我用JS实现过插入一个搜索框的功能，样式很丑，并且只能在Firefox中使用，这段时间学习了jQuery和Bootstrap，就拿起这个项目练手了。