【web前端】花瓣畫板分類歸檔查看工具

mochixuan 發(fā)布于2019-08-23 13:49 / 2942人閱讀

摘要：花瓣是國內(nèi)最大的圖片分享網(wǎng)站，部分用戶長(zhǎng)期以來都有對(duì)個(gè)人主頁的畫板按字母順序進(jìn)行歸檔的需求，但花瓣官方一直沒有支持這個(gè)能力。

花瓣是國內(nèi)最大的圖片分享網(wǎng)站，部分用戶長(zhǎng)期以來都有對(duì)個(gè)人主頁的畫板按字母順序進(jìn)行歸檔的需求，但花瓣官方一直沒有支持這個(gè)能力。

最近寫了個(gè)油猴腳本用于按字母順序歸檔主頁畫板。

僅供學(xué)習(xí)交流。

效果演示

注：由于我自己沒幾個(gè)畫板，為了進(jìn)行演示，這個(gè)圖是我在別人的主頁截取的。實(shí)際上使用這個(gè)工具時(shí)只在自己的主頁生效。

優(yōu)點(diǎn)

安裝簡(jiǎn)單

使用方便，直接改變個(gè)人主頁。不用打開別的軟件或者界面。

由于頁面更加簡(jiǎn)單，并對(duì)圖片渲染做了點(diǎn)優(yōu)化，性能比原始頁面更好。

安裝和使用

安裝chrome擴(kuò)展TamperMonkey(俗稱油猴)

安裝花瓣畫板歸檔腳本

打開自己的畫板查看效果

按下首字母可以調(diào)到對(duì)應(yīng)位置

關(guān)閉/卸載

在生效的頁面點(diǎn)擊TamperMonkey圖標(biāo)可以關(guān)閉腳本

點(diǎn)擊TamperMonkey選擇dashboard可以全局管理腳本

卸載TamperMonkey亦可

開發(fā)中的一些總結(jié) 1.協(xié)議分析

容易看到花瓣分段拉取畫板的url形如http://huaban.com/xxx/?jp4z1e1x&limit=10&wfl=1&max=42190948
jp4z1e1x這段每次請(qǐng)求是自增的，大概是個(gè)sequence之類的東西。chrome查看請(qǐng)求的initiator，點(diǎn)進(jìn)去可以看到調(diào)用的是String.uniqueID，搜一下具體實(shí)現(xiàn)是

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

跟猜測(cè)一致。不過這里我實(shí)際上不需要關(guān)注它的實(shí)現(xiàn)細(xì)節(jié)。油猴腳本是可以訪問到一樣的類型和函數(shù)的。
另外這里對(duì)請(qǐng)求的header也有要求，需要設(shè)置一下

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

最后把limit字段調(diào)成需要的大小就好了。

2.圖片較多時(shí)的渲染性能

一開始為了展示小圖片，用的是background-image，

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

結(jié)果發(fā)現(xiàn)滾動(dòng)的時(shí)候會(huì)卡。
跑了一下性能工具，發(fā)現(xiàn)主要是渲染耗時(shí)。
改成標(biāo)簽性能會(huì)好一些，但是還是有點(diǎn)卡。
那么就只能去處理原始圖片了。
一開始想的是通過canvas放縮、裁剪圖片，再傳給img標(biāo)簽。但是花瓣的圖片是禁止跨域的，就是說雖然可以正常展示，但是用canvas去編輯是不行的。

最后發(fā)現(xiàn)，花瓣的圖片用的是又拍云存的。又拍、七牛這些，都允許針對(duì)圖片鏈接加點(diǎn)后綴返回指定的圖片。這里用_/both/50x50使得拿到的圖片限定大小50*50。使用原始大小的img，一個(gè)頁面就算有幾百張圖，也一點(diǎn)都不卡了。

3.快捷鍵沖突

花瓣有定義一些自己的快捷鍵。比如按T會(huì)跳到頁面頂部。這和我需要的跳到對(duì)應(yīng)首字母分類的位置是矛盾的。
本來原有的時(shí)間監(jiān)聽我們是無法處理的，不過所幸花瓣把大量接口暴露在window.app變量里，找了一下相關(guān)的有window.app.hotkey.keyboard.$events和window.app.hotkey.keyboard.options.events，索性直接置為{}，花瓣的快捷鍵邏輯就沒了。