比Python，JavaScript才是更適合寫爬蟲的語言。原因有如下三個方面：

• JavaScript異步IO機制適用于爬蟲這種IO密集型任務。JavaScript中的回調非常自然，使用異步網絡請求能夠充分利用CPU。
• JavaScript中的jQuery毫無疑問是最強悍的HTML解析工具，使用JavaScript寫爬蟲能夠減少學習負擔和記憶負擔。雖然Python中有PyQuery，但終究還是比不上jQuery自然。
• 爬取結果多為JSON，JavaScript是最適合處理JSON的語言。

一、任務：爬取用戶在Github上的repo信息

通過實例的方式學習爬蟲是最好的方法，先定一個小目標：爬取github repo信息。入口URL如下，我們只需要一直點擊next按鈕就能夠遍歷到用戶的所有repo。

https://github.com/{{username}}?tab=repositories

獲取repo之后，可以做什么？

• 統計用戶最常使用的語言，統計用戶語言使用分布情況統計用戶所獲取的star數，fork數

二、爬蟲雙股劍：axios和jQuery

axios是JavaScript中很常用的異步網絡請求庫，相比jQuery，它更輕量、更專業。既能夠用于瀏覽器端，也可以用于Node。它的語法風格是promise形式的。在本任務中，只需要了解如下用法就足夠了：

axios.get(url).then((resp) => {
 請求成功，處理resp.data中的html數據
}).catch((err) => {
 請求失敗，錯誤處理
})

請求之后需要處理回復結果，處理回復結果的庫當然是用jQuery。實際上，我們有更好的選擇：cheerio。

在node下，使用jQuery，需要使用jsdom庫模擬一個window對象，這種方法效率較低，四個字形容就是：笨重穩妥。

如下代碼使用jQuery解析haha.html文件

fs = require("fs")
jquery=require('jquery')
jsdom=require('jsdom') //fs.readFileSync()返回結果是一個buffer，相當于byte[] 
html = fs.readFileSync('haha.html').toString('utf8') 
dom= new jsdom.JSDOM(html) 
$=jquery(dom.window) console.log($('h1'))

cheerio只實現了jQuery中的DOM部分，相當于jQuery的一個子集。cheerio的語法和jQuery完全一致，在使用cheerio時，幾乎感覺不到它和jQuery的差異。在解析HTML方面，毫無疑問，cheerio是更好的選擇。如下代碼使用cheerio解析haha.html文件。

cheerio=require('cheerio')
html=require('fs').readFileSync("haha.html").toString('utf8')
$=cheerio.load(html)
console.log($('h1'))

只需20余行，便可實現簡單的github爬蟲，此爬蟲只爬取了一頁repo列表。

var axios = require("axios")
var cheerio = require("cheerio")
axios.get("https://github.com/weiyinfu?tab=repositories").then(resp => {
 var $ = cheerio.load(resp.data)
 var lis = $("#user-repositories-list li")
 var repos = []
 for (var i = 0; i < lis.length; i++) {
 var li = lis.eq(i)
 var repo = {
 repoName: li.find("h3").text().trim(),
 repoUrl: li.find("h3 a").attr("href").trim(),
 repoDesc: li.find("p").text().trim(),
 language: li.find("[itemprop=programmingLanguage]").text().trim(),
 star: li.find(".muted-link.mr-3").eq(0).text().trim(),
 fork: li.find(".muted-link.mr-3").eq(1).text().trim(),
 forkedFrom: li.find(".f6.text-gray.mb-1 a").text().trim()
 }
 repos.push(repo)
 }
 console.log(repos)
})

三、更豐富的功能

爬蟲不是目的，而是達成目的的一種手段。獲取數據也不是目的，從數據中提取統計信息并呈現給人才是最終目的。

在github爬蟲的基礎上，我們可以擴展出更加豐富的功能：使用echarts等圖表展示結果。

要想讓更多人使用此爬蟲工具獲取自己的github統計信息，就需要將做成一個網站的形式，通過搜索頁面輸入用戶名，啟動爬蟲立即爬取github信息，然后使用echarts進行統計展示。網站肯定也要用js作為后端，這樣才能和js爬蟲無縫銜接，不然還要考慮跨語言調用。js后端有兩大web框架express和koa，二者API非常相似，并無優劣之分，但express更加流行。

如上設計有一處用戶體驗不佳的地方：當啟動爬蟲爬取github信息時，用戶可能需要等待好幾秒，這個過程不能讓用戶干等著。一種解決思路是：讓用戶看到爬蟲爬取的進度或者爬取過程?？梢酝ㄟ^websocket向用戶推送爬取過程信息并在前端進行展示。展示時，使用類似控制臺的界面進行展示。

如何存儲爬取到的數據呢？使用MongoDB或者文件都可以，最好實現兩種存儲方式，讓系統的存儲方式變得可配置。使用MongoDB時，用到js中的連接池框架generic-pool。

整個項目用到的庫包括：

• express：后端框架
• cheerio+axios：爬蟲
• ws：websocket展示爬取過程
• webpack：打包工具
• less：樣式語言
• echarts：圖表展示
• vue：模板渲染
• jquery：DOM操作
• mongodb：存儲數據
• generic-pool：數據庫連接池

試用地址：

https://weiyinfu.cn/githubstatistic/search.html?

案例地址：https://github.com/weiyinfu/GithubStatistic

原文鏈接：https://zhuanlan.zhihu.com/p/53763115