参考

http://www.jianshu.com/p/e05436dd8bdc

实践

1. 观察发现url的规律

chrome调试工具

2. 在webstorm中构建项目

"devDependencies": {  
"browser-sync": "^2.17.0",  
"cheerio": "^0.22.0",  
"nunjucks": "^2.5.2"}

http.request：node http模块的request方法可以作为http client向服务器发起http请求，爬虫需要向目标链接发起http请求来获得页面信息
cheerio：通过http请求到的页面信息，由于缺乏浏览器的dom解析，看起来就是一段凌乱的字符串，实在糟糕。好在我们可以使用cheerio库将其解析为dom，这样我们就可以使用类似jquery的语法去分析页面信息
promise：由于node单线程的特性，不可避免的需要用到大量异步编程的写法，层层嵌套的回调写法已经low了，来试试promise的写法
Browsersync:能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面 >>http://www.browsersync.cn/

按照如下的顺序逐个去完成

request.js

根据指定的url和参数去请求数据并接收数据

seekList.js

获取简书热门文章的文章列表，获取前100页，每页9条数据

seekDetails.js

根据文章详情url组成的urls数组，进入文章，分别去查找计算里面有多少个代码块

analyse.js

分析页面结构，将及部分组合起来

基本流程图

获取的列表数据

有图片和没图片的`<li>`是不同的

模板引擎 nunjucks 官网

http://www.360doc.com/content/16/0704/17/8357485_573052060.shtml

index.tpl

文章展示的模板
使用nunjucks语法，可以渲染
ECharts

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

官网