摘要：起因昨天上知乎一看，發(fā)現(xiàn)自己關(guān)注的問題接近個了，不能忍，希望控制在個以以內(nèi)最好是個以內(nèi)。到問題詳情頁分析取消關(guān)注的格式，使用問題拼裝。功能說明把所有關(guān)注的問題列出來。而實際上知乎顯示我關(guān)注的問題有個。知乎的列表的結(jié)構(gòu)和接口都可能會修改。

昨天上知乎一看，發(fā)現(xiàn)自己關(guān)注的問題接近1000個了，不能忍，希望控制在500個以以內(nèi)最好是100個以內(nèi)。于是打開我關(guān)注的問題列表。發(fā)現(xiàn)這個列表已經(jīng)由滾動加載變成了分頁，并且不能在問題列表頁面直接點取消關(guān)注，需要進(jìn)入問題詳情頁面去取消關(guān)注。這樣一來工作量就太大了。
之前滾動加載的時候只要寫個小腳本在控制臺運(yùn)行一下就可以把所有的問題加載出來，現(xiàn)在想把所有的問題加載出來就不行了。

但是作為一個前端，對頁面上的東西，總是可以想想辦法的。那就寫個小小的chrome插件吧。

要實現(xiàn)的功能點：

一次性把所有的問題加載出來。

就在問題列表頁面取消關(guān)注。

思路：

從第一頁開始，依次模擬點下一頁的按鈕。每次點之前把當(dāng)前頁的問題列表的數(shù)據(jù)保存成html字符串。放進(jìn)一個數(shù)組。

沒有下一頁按鈕的時候，表示已經(jīng)到了最后一頁。拼裝所有的html字符串。替換最后一頁的列表區(qū)。

實現(xiàn)的時候要注意的是什么時候去點擊下一頁，在什么時機(jī)觸發(fā)。因為我們要確定下一頁的數(shù)據(jù)加載過來了，才能進(jìn)行下一次點擊，不然就可能出現(xiàn)漏頁的情況。 觀察頁面發(fā)現(xiàn)每一頁的數(shù)據(jù)加載好，知乎就會把滾動條移動到頂部去。所以我們可以通過監(jiān)測scroll事件來判斷當(dāng)前頁面的數(shù)據(jù)是否已經(jīng)加載完畢。監(jiān)測到scroll事件的時候就是我們發(fā)起下一次點擊的時候。并且當(dāng)下一頁加載好之后我們要再把滾動條移動到底部去。這樣加載新一頁的時候滾動條才會再次往上移，從而觸發(fā)我們綁定的scroll事件。
另外，就是scroll事件一般會一次性觸發(fā)好多個。我們要保證我們綁定的事件的邏輯代碼只執(zhí)行一次。所以我加了一個timeout定時器，稍微延遲一下。等滾動條停下來的時候才真正執(zhí)行事件邏輯。在這個timeout運(yùn)行之前的再次觸發(fā)的scroll事件都會直接return掉。并且設(shè)置一個適當(dāng)延遲，也減小了被誤認(rèn)為是爬蟲的概率。

思路：

給每個問題加按鈕。直接append就行了。并綁定事件。

從問題的dom結(jié)構(gòu)中拿到問題的url，并從url中解析出問題id。

到問題詳情頁分析取消關(guān)注的url格式，使用問題id拼裝。

自己發(fā)ajax請求。delete格式。

為了方便，我就直接寫成chrome插件使用了。就不用每次手動到控制臺去運(yùn)行了。
直接拿之前寫的一個chrome插件的架子過來開干。
chrome插件的入門寫法以及使用我之前有篇文章寫過。一個簡單的chrome拓展程序開發(fā)
并且之前的chrome插件架子里集成了jQuery,代碼寫起來就更歡快了。

/* 
 * 功能說明：
 * 1.把所有關(guān)注的問題列出來。
 * 2.給所有的問題添加取消關(guān)注按鈕并完成取消關(guān)注。
 * 
 * author: liusaint@gmail.com
 * date: 20180120
 */

var ZhiHu = {
    htmlArr: [], //保存每一頁的問題的html數(shù)據(jù)。
    pageItems: {}, //保存每一頁的數(shù)量。
    INTEVAL: 2000, //翻頁的時間間隔。請求下一頁的間隔?？梢哉{(diào)小一些。
    timer: "", //定時器
    //初始化。
    init: function() {

        var that = this;

        //綁定滾動事件。當(dāng)頁面滾動了就可以開始請求下一頁的數(shù)據(jù)了。
        $(window).on("scroll", this.scrollFn.bind(this));
        //初始調(diào)用。
        this.scrollFn();

        //給我們添加的按鈕綁定事件。
        $("body").on("click", ".del-q", function(event) {
            that.delQ($(this));
        });
    },
    //取消關(guān)注。拼裝url，發(fā)送delete請求。
    //需要拼裝的url接口格式：https://www.zhihu.com/api/v4/questions/20008370/followers
    delQ: function(jqObj) {     

        var questionUrl, matchArr, delUrl, questionId;

        //問題頁面鏈接
        questionUrl = jqObj.siblings(".QuestionItem-title").find("a").attr("href");
        if (!questionUrl) {
            return;
        }

        //正則匹配問題id
        matchArr = questionUrl.match(/d+/);
        if (matchArr) {
            questionId = matchArr[0];
        }

        delUrl = "https://www.zhihu.com/api/v4/questions/" + questionId + "/followers";

        $.ajax({
            url: delUrl,
            type: "delete",
            success: function(data) {
                //成功的話刪除該列。
                jqObj.closest(".List-item").remove();
            }
        })

    },
    //頁面滾動時觸發(fā)的事件。
    scrollFn: function(event) {
        var that = this;
        //滾動條滾動時會多次調(diào)用此方法，攔截掉。
        if (this.timer) {
            return;
        }
        this.timer = setTimeout(function() {
            //頁面內(nèi)容提取
            that.saveData();

            //如果有下一頁，模擬點擊。
            if ($(".PaginationButton-next").length > 0) {
                $(".PaginationButton-next")[0].click();
                //移動到底部。
                that.scrollBottom();
            } else {
                //到了最后一頁了。最后的數(shù)據(jù)處理。
                that.mergeList();
                //解綁事件
                $(window).off("scroll");
            }

            clearTimeout(that.timer);
            that.timer = "";
        }, this.INTEVAL)

    },
    //從頁面中提取問題html數(shù)據(jù)與每頁的數(shù)量。
    saveData: function() {
        var html = $(".List-header+div").prop("outerHTML");
        this.htmlArr.push(html);
        //當(dāng)前頁面的問題數(shù)量
        this.pageItems[$(".PaginationButton--current").text()] = $(".List-item").length;
    },
    //數(shù)據(jù)收集完成后對列表的處理。
    mergeList: function() {
        var html = this.htmlArr.join("");
        //組裝所有頁的數(shù)據(jù)到一頁。
        $(".List-header+div").html(html);
        //移除分頁
        $(".Pagination").remove();
        //給每個問題添加取消關(guān)注按鈕
        $(".ContentItem-title").append("取消關(guān)注");
        //把每頁的數(shù)量打出來看一下，發(fā)現(xiàn)并不是每頁都是20條數(shù)據(jù)。
        top.console.log(this.pageItems);
    },
    //滾動到底部
    scrollBottom: function() {
        var h = $(document).height() - $(window).height();
        $(document).scrollTop(h);
    },

}

/* chrome插件部分。核心代碼是上面的內(nèi)容 */
chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting == "hello") {
            //執(zhí)行上面的內(nèi)容
            ZhiHu.init();
        }
    }
);

插件完成，加載到chrome瀏覽器，點擊運(yùn)行。功能正常。大功告成。

不過當(dāng)所有問題都加載出來之后發(fā)現(xiàn)了比較奇怪的事情，就是一共加載出來911個問題。而實際上知乎顯示我關(guān)注的問題有950個。所以我一度懷疑是不是哪個邏輯有錯誤少加載了一兩頁的數(shù)據(jù)。就在代碼里加入了一個對象保存每一個問題頁面的問題數(shù)據(jù)。
得出的結(jié)果是并不是每一頁都有20個問題的。有些頁面只有19個，最少的甚至只有16個。于是我點開某一頁最少的，挨個數(shù)一下，發(fā)現(xiàn)真是只有16個。然后把這些數(shù)據(jù)加起來，確實是911個。
另外39個問題真是消失在搜索結(jié)果中了。

本代碼具有時效性，僅供參考。知乎的列表的dom結(jié)構(gòu)和接口都可能會修改。如果發(fā)現(xiàn)代碼不能運(yùn)行，可以酌情修改代碼再運(yùn)行。

效果圖：

插件github地址

文章github地址