千山助手,开发之初体验

学习编程有些日子了,照着样例写一些花瓶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,就拿起这个项目练手了。


参考资料

Copyright © 2021 DukeLuo Blog

Powered by Hexo • Theme Candelas