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

mochixuan 发布于2019-08-23 13:49 / 2806人阅读

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

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

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

仅供学习交流。

效果演示

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

优点

安装简单

使用方便，直接改变个人主页。不用打开别的软件或者界面。

由于页面更加简单，并对图片渲染做了点优化，性能比原始页面更好。

安装和使用

安装chrome扩展TamperMonkey(俗称油猴)

安装花瓣画板归档脚本

打开自己的画板查看效果

按下首字母可以调到对应位置

关闭/卸载

在生效的页面点击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%;

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

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

3.快捷键冲突

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

服务器托管私有云 web前端工具 web服务器控件分类前端web前端前端工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99624.html

推荐几款chrome上比较好用的书签收藏夹插件

摘要：我相信这是很多人共同的感受，所以今天推荐的款书签收藏夹插件印象笔记剪藏插件下载地址印象笔记推出的一款剪藏插件，可以一键收藏各类网页图文，并永久保存进。今天有个人问我chrome浏览器器上有没有可以稍后阅读的插件啊？她其实想问的就是书签收藏夹插件，因为我们在互联网上一不小心就会看到很多感兴趣的内容，但是时间有限暂时无法阅读，以后保存下来有时间的时候再看。我相信这是很多人共同的感受，所以...

superPershing 2019-08-20 14:34 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
下个时代的前端研发，效率还能提升。PxCook 3.0，最高效的设计研发利器

摘要：相比于之前更加高效，易用。同时也是我们个种子用户群呼声最高的。首先的调整就是把智能标注的图标放在了左侧，体现从属关系。戏太足的开发小队设计的初衷，是在不打扰设计师的前提下，提供完整的项目管理与呼声最高的画板功能。这世上哪有什么天才，有的人只是把大家设计标注、写前端的时间拿来喝咖啡，和思考罢了 showImg(https://segmentfault.com/img/bVUhyy?w=...

marek 2019-08-16 10:43 评论0 收藏0