千山助手，开发之初体验

置顶 dukelu0

于 2018-11-11 19:35:09 发布

阅读量482

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/pivilion/article/details/83961334

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习编程有些日子了，照着样例写一些花瓶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对象是异步编程的一种解决方案，这次是我第一次接触，又是知识的盲区－_－^。