用純客戶端JavaScript來寫一個有趣的爬蟲

拿JavaScript寫爬蟲，聽起來貌似有些不靠譜？

爬蟲，大多人對於爬蟲的理解都停留在使用後端語言如Python寫的爬蟲。可是實際上，使用客戶端JavaScript有諸多後端爬蟲所沒法擁有的優點：

• 能夠方便的分享給其餘人用，只要對方電腦裏有瀏覽器

• 因爲跑在客戶端，幾乎能夠無視對方網站的反爬蟲機制

• 能夠擁有完善的UI，無開發基礎的小白也能夠隨意使用

這東西應該怎麼啓動？

而「客戶端JavaScript爬蟲如何運行」問題，回答這個問題很是簡單，大體有3種運行JavaScript的代碼：

• 存瀏覽器書籤，以javascript:打頭，點擊便可運行

• 複製到瀏覽器console中按回車

• 有個瀏覽器擴展叫作「油猴子」

這裏咱們主要看下第三種，油猴腳本方式運行。

或許你據說過油猴擴展，他在Firefox叫作Greasemonkey在Chrome叫作Tampermonkey，你能夠輕鬆的在瀏覽器的擴展商店找到它。而關於其自己有何做用，一句話

按照規則，在不一樣的URL額外運行一段JavaScript代碼

請參考下面的例子：

// ==UserScript==
// @name          Pxer
// @include       http://www.pixiv.net*
// ==/UserScript==
javascript:void((function() {
    
    document.documentElement.appendChild(
        document.createElement('script')
    ).src='http://pxer-app.pea3nut.org/jsonp.js?'+(+new Date);

})());

==UserScript==是油猴腳本的規則，上面的規則告訴油猴：

當瀏覽器打開http://www.pixiv.net*的頁面時，執行下面的腳本

而腳本的內容則是：經過jsonp的方式向頁面引入一個js文件。

這就能夠作不少事了。（不是壞事哦~）

優點，仍是很是多的

上圖是一個二次元插畫交流站pixiv.net。圖中顯示「Pxer 7」的那一個長條是本來不存在與原網站中的，而是經過油猴腳本自動載入JavaScript腳原本建立的。

若想訪問圖中的原始連接能夠點擊這裏，可能你須要先在pixiv.net註冊一個帳號

經過油猴腳本自動載入，你能夠作到：

在徹底不影響原網站使用的狀況下，利用強大的JavaScript向用戶提供額外的功能

再結合一開始提到的優勢：

• 能夠給任何人使用！哪怕是無開發基礎的小白

• 不會被封殺！由真實用戶操做，封帳號、IP、驗證碼等反爬蟲策略你以爲會對客戶端爬蟲有效嗎？

• 利用HTML+CSS，構建一個漂亮的UI完美融入原網站，簡直不能再簡單~

忽然莫名的感受很無敵有木有？

說了這麼多，來個實際實現的例子

空說無憑，來看一個實際的客戶端JavaScript爬蟲開源項目 —— Pxer

• Github：https://github.com/pea3nut/Pxer

• 項目官網：http://pxer.pea3nut.org/

Pxer是一個純客戶端JavaScript編寫的爬蟲，無需任何配置便可直接在瀏覽器端運行。

Pxer最大做用是將pixiv.net網站（相似於花瓣網）中的圖片做品快速的抓取下來。它不是簡單的檢索img標籤，而是經過必定的算法和Ajax請求來完成更爲複雜的功能。

關於項目的詳細描述，能夠參考項目官網和Github項目主頁

良好的jsDOC格式註釋和詳細的文檔都已經爲你準備好了~~

• https://github.com/pea3nut/Pxer

讓JavaScript來的更猛烈些~~