【web前端】花瓣画板分类归档查看工具

花瓣是国内最大的图片分享网站，部分用户长期以来都有对我的主页的画板按字母顺序进行归档的需求，但花瓣官方一直没有支持这个能力。

最近写了个油猴脚本用于按字母顺序归档主页画板。

仅供学习交流。

效果演示

注：因为我本身没几个画板，为了进行演示，这个图是我在别人的主页截取的。实际上使用这个工具时只在本身的主页生效。

优势

1. 安装简单
2. 使用方便，直接改变我的主页。不用打开别的软件或者界面。
3. 因为页面更加简单，并对图片渲染作了点优化，性能比原始页面更好。

安装和使用

1. 安装chrome扩展TamperMonkey(俗称油猴)
2. 安装花瓣画板归档脚本
3. 打开本身的画板查看效果
4. 按下首字母能够调到对应位置

5. 关闭/卸载

   • 在生效的页面点击TamperMonkey图标能够关闭脚本
   • 点击TamperMonkey选择dashboard能够全局管理脚本
   • 卸载TamperMonkey亦可

---

---

开发中的一些总结

1.协议分析

容易看到花瓣分段拉取画板的url形如http://huaban.com/xxx/?jp4z1e1x&limit=10&wfl=1&max=42190948
jp4z1e1x这段每次请求是自增的，大概是个sequence之类的东西。chrome查看请求的initiator，点进去能够看到调用的是String.uniqueID，搜一下具体实现是

var m = Date.now();
    String.extend("uniqueID", function() {
        return (m++).toString(36)
    })

跟猜想一致。不过这里我实际上不须要关注它的实现细节。油猴脚本是能够访问到同样的类型和函数的。
另外这里对请求的header也有要求，须要设置一下

xmlHttp.setRequestHeader("X-Request", 'JSON');
    xmlHttp.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
    xmlHttp.setRequestHeader("Accept", 'application/json');

最后把limit字段调成须要的大小就行了。

2.图片较多时的渲染性能

一开始为了展现小图片，用的是background-image，

background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;

结果发现滚动的时候会卡。
跑了一下性能工具，发现主要是渲染耗时。
改为<img>标签性能会好一些，可是仍是有点卡。
那么就只能去处理原始图片了。
一开始想的是经过canvas放缩、裁剪图片，再传给img标签。可是花瓣的图片是禁止跨域的，就是说虽然能够正常展现，可是用canvas去编辑是不行的。

最后发现，花瓣的图片用的是又拍云存的。又拍、七牛这些，都容许针对图片连接加点后缀返回指定的图片。这里用_/both/50x50使得拿到的图片限定大小50*50。使用原始大小的img，一个页面就算有几百张图，也一点都不卡了。

3.快捷键冲突

花瓣有定义一些本身的快捷键。好比按T会跳到页面顶部。这和我须要的跳到对应首字母分类的位置是矛盾的。
原本原有的时间监听咱们是没法处理的，不过所幸花瓣把大量接口暴露在window.app变量里，找了一下相关的有window.app.hotkey.keyboard.$events和window.app.hotkey.keyboard.options.events，索性直接置为{}，花瓣的快捷键逻辑就没了。