【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，索性直接置爲{}，花瓣的快捷鍵邏輯就沒了。