Github前端项目排名(2016-04-04)

一、前言

近几年前端技术日新月异，从 RequireJS 到 AngularJS 再到 React，似乎每天都有新的技术诞生。而大神们总能第一时间获取到最新资讯，在我们还在刀耕火种的年代就使用上各种高新技术，甚是膜拜。

为了赶上时代的脚步，加上昨天闲着蛋痛。。。就打算去 Github 研究一波，看看大家都在干什么。万一找到一个潜力股项目在萌芽阶段，然后我就去读懂它的源代码，努力成为项目主要贡献者，等星星上来之后，不就成为又一个大牛了吗！(想想就好...)。于是项目按星星排序，一个个研究。。。突然发现这样子太笨了，不如写个爬虫把所有信息都捉取过来弄个排行榜吧。正计划中又发现这个网站Github Rank，上面写着 by Github API v3。原来有 Github 有开放 api 的，还tm写爬虫那不是逗吗。。。

二、使用Nodejs生成排行榜

于是乎就用 Nodejs 编写了简单的脚本，自动生成前端项目的排行榜。前端项目指使用语言类型为 JavaScript 、 CSS 和 HTML 的项目。具体代码如下，大家可以复制过去玩玩，只要使用node index.js就可以生成最新的前端项目排行榜，当然如果你想自定义排行榜类型的话，修改一下源码，也很简单（代码使用了一些 ES6 的语法，如果大家对 ES6 不太熟悉，强烈推荐查看阮一峰老师的开源电子书 ECMAScript 6入门）。此外要注意的一点是生成的文档为 markdown 格式，所以你还需要一个相关的编辑器查看。 这份代码也可以在我的 Github 上查看。

var https = require('https');
var fs = require('fs');

var options = {
    protocol: 'https:',
    host: 'api.github.com',
    path: '/search/repositories?q=language:javascript+language:css+language:html+stars:>=10000&sort=stars&order=desc&per_page=100',
    method: 'GET',
    headers: {
        'User-Agent': 'frontend-repos-ranking',
    }
};

var getRepos = new Promise(function(resolve, reject) {
    var req = https.request(options, (res) => {
        var data = '';
        res.setEncoding('utf8');
        res.on('data', (chunk) => {
            data += chunk;
        });
        res.on('end', () => {
            resolve(data);
        })
    });

    req.on('error', (e) => {
        console.log(`problem with request: ${e.message}`);
    });

    req.end();
});

getRepos.then((repos) => {
    var markdown = 
`# frontend-repos-ranking
## ${(new Date()).toDateString()}
github上所有前端项目（HTML+CSS+JavaScript）的总排名！
本页面使用nodejs结合github的api自动生成，您可以通过运行\`node index.js\`来生成最新的排行榜。\n\n`;

    markdown += ' Rank | Name(Description) | Star | Language | Created_At \n';

    markdown += ' --- | --- | --- | --- | --- \n';

    repos = JSON.parse(repos);

    repos.items.forEach((item, index) => {

        markdown += `${index+1}|[**${item.full_name}**](${item.html_url})<br><br>${item.description}|${item.stargazers_count}|${item.language}|${item.created_at.split('T')[0]}\n`;

    });

    fs.writeFile('README.md', markdown);
});

三、排行榜

接下来放出排名前100的前端项目，这样我就可以好好研究一下每一个项目啦（hehe...）。
博客园里的这表格样式太丑了。。。推荐到我的 Github 上查看

四、总结

有朝一日我会把上面的全部项目都研究一遍的。。。