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

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

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

要實(shí)現(xiàn)的功能點(diǎn)：

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

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

思路：

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

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

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

思路：

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

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

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

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

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

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

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

        var that = this;

        //綁定滾動(dòng)事件。當(dāng)頁面滾動(dòng)了就可以開始請(qǐ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請(qǐng)求。
    //需要拼裝的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();
            }
        })

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

            //如果有下一頁，模擬點(diǎn)擊。
            if ($(".PaginationButton-next").length > 0) {
                $(".PaginationButton-next")[0].click();
                //移動(dòng)到底部。
                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ù)收集完成后對(duì)列表的處理。
    mergeList: function() {
        var html = this.htmlArr.join("");
        //組裝所有頁的數(shù)據(jù)到一頁。
        $(".List-header+div").html(html);
        //移除分頁
        $(".Pagination").remove();
        //給每個(gè)問題添加取消關(guān)注按鈕
        $(".ContentItem-title").append("取消關(guān)注");
        //把每頁的數(shù)量打出來看一下，發(fā)現(xiàn)并不是每頁都是20條數(shù)據(jù)。
        top.console.log(this.pageItems);
    },
    //滾動(dòng)到底部
    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瀏覽器，點(diǎn)擊運(yùn)行。功能正常。大功告成。

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

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

效果圖：

插件github地址

文章github地址