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

mochixuan 發布于2019-08-23 13:49 / 2936人閱讀

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

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

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

僅供學習交流。

效果演示

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

優點

安裝簡單

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

由于頁面更加簡單，并對圖片渲染做了點優化，性能比原始頁面更好。

安裝和使用

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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