摘要：參數(shù)中，表示的名稱，表示是否限制顯示的條目，默認(rèn)顯示全部，如果超過最大項(xiàng)目數(shù)，也顯示全部。是一個(gè)過濾器，表示一些不想顯示的項(xiàng)目，可選和兩種方式。這個(gè)樣式并不是固定的，可以根據(jù)自己的需求來改變。

經(jīng)常會(huì)在別人的簡歷中看到，做過什么高大上的項(xiàng)目。說實(shí)話，有時(shí)候看到一些大牛的簡歷，會(huì)感到非常的自卑，入行前端也一年多的時(shí)間了，但真正的‘懂行’或許也就半年的時(shí)間吧。真正大的前端項(xiàng)目沒有做過，一些小的個(gè)人項(xiàng)目大多都托管在 GitHub，前段時(shí)間醞釀了一個(gè)展示 GitHub 項(xiàng)目的一個(gè)小 Project，今天就來說說這個(gè)東西。

以前學(xué)前端，就只是學(xué) HTML，CSS 和 JS，看書，看視頻，大概這樣的日子持續(xù)了好幾個(gè)月，不能說沒有一點(diǎn)效果，至少一些前端的基本概念都有所了解。慢慢地，開始接觸到 GitHub，發(fā)現(xiàn)這里真是前端學(xué)習(xí)的一個(gè)高效場所。一個(gè)前端er，如果不逛 GitHub，必定是一個(gè)失敗的前端，因?yàn)樵?GitHub，視野可以得到很大的擴(kuò)展。后來索性把瀏覽器主頁也設(shè)置成了 GitHub。

發(fā)現(xiàn)好多大公司在招實(shí)習(xí)生和應(yīng)屆生的時(shí)候，也開始慢慢的關(guān)注應(yīng)聘者的 GitHub 的信息，有時(shí)候在做一些網(wǎng)測題的時(shí)候，會(huì)看到輸入 GitHub 地址或博客地址，其實(shí)，有時(shí)候你不夠優(yōu)秀的原因是因?yàn)槟悴粫?huì) show yourself。

偶然間看到了一個(gè)精美博客的一個(gè)項(xiàng)目展示頁面，感覺很不錯(cuò)。看了下它的源碼，不是很復(fù)雜，通過 JavaScript 從 api.github.com 獲取 json 數(shù)據(jù)，動(dòng)態(tài)的渲染到頁面中。于是，依葫蘆畫瓢，把整個(gè)展示頁面的代碼模仿 copy 下來，然后加入了擴(kuò)展的元素。

GitHub 項(xiàng)目地址在這，Demo 地址在這。

想來想去，還是準(zhǔn)備用 Jquery，本來想寫原生的，但是考慮到 ajax 操作和 html 操作，想想還是算了。首先用一個(gè)閉包，避免全局變量污染，把 JQuery 對象傳進(jìn)來：

(function($){
  var showProjects = function(option){
    ...
  }
  // 把函數(shù)扔給 prototype
  $.prototype.showProjects = showProjects;
})($)

使用也很簡單，設(shè)置了一個(gè) option 配置對象，參數(shù)可選，如下：

//html




//js
$(".projects").showProjects({
  name : "songjinzhong", //your github url name
  maxNum : 12, // max Num you want show your projects
  loading : "
加載中...
", //loading informtion
  filter : { // filter for your projects, can be id or name
    id : [66267751],
    name : ["7studying.com"]
  }
});

只要是一個(gè) JQuery 對象都可以使用 showProjects 函數(shù)，但是之前必須要引入 JQuery 庫。

參數(shù)中，name 表示 github 的名稱，maxNum 表示是否限制顯示的條目，默認(rèn)顯示全部，如果 maxNum 超過最大項(xiàng)目數(shù)，也顯示全部。因?yàn)檫@個(gè) js 是動(dòng)態(tài)從 GitHub 加載的，訪問速度很慢的時(shí)候，loading 相當(dāng)于提示作用，也可以設(shè)置成其他內(nèi)容。filter 是一個(gè)過濾器，表示一些不想顯示的項(xiàng)目，可選 id 和 name 兩種方式。

來看看 showProjects 函數(shù)中的內(nèi)容，以下是一些參數(shù)設(shè)置：

var projects = this;

// no github name
if(!option || !option.name){
  projects.html("
參數(shù)錯(cuò)誤
請?jiān)O(shè)置 GitHub 用戶名
");
  return;
}

// defaultSetting
option.maxNum = option.maxNum || 0;
option.loading = option.loading || "
加載中...
";
var name = (option.filter && option.filter.name) || [],
  id = (option.filter && option.filter.id) || [];

在查看 github 返回的 json 數(shù)據(jù)之前，建議先自己訪問一下 https://api.github.com/users/songjinzhong/repos?type=owner，了解數(shù)據(jù)格式。其中會(huì)用到的數(shù)據(jù)格式有 html_url, name, description, language, stargazers_count, forks_count。

// 先設(shè)置 loading，然后 $.get
projects.length > 0 && projects.html(option.loading) && $.get("https://api.github.com/users/"+ option.name +"/repos?type=owner", function(data){
  if(data){
    // 成功返回后刪除 loading
    projects.html("");
    // 過濾操作，用于去掉沒有 description 和 fork 項(xiàng)目
    data = data.filter(function(a){
      return null != a.description && a.fork == false && name.indexOf(a.name) == -1 && id.indexOf(a.id) == -1; 
    });
    // 排序操作，安裝 star 數(shù)和 fork 數(shù)排序
    data = data.sort(function(a, b){
      return b.stargazers_count - a.stargazers_count|| b.forks_count - a.forks_count;
    })
    var item = "";
    // 實(shí)現(xiàn)如果設(shè)置 maxNum 的情況
    if(option.maxNum > 0 && option.maxNum < data.length){
      data = data.slice(0,option.maxNum);
    }
    // 對剩下的 data 每一項(xiàng)都添加到 html 中
    data.forEach(function(repo){
      // language underfined 問題，改成字符串 null
      repo.language = repo.language || "null";
      // 替換 template 模版中的字符串
      item = template.replace(/[(.*?)]/g, function(){
        return eval(arguments[1]);
      });
      projects.append(item);
    });
  }else{
    projects.html("
加載失敗
請刷新或稍后再試...
");
  }
})

template 是字符串模版，巧妙的通過 replace 來替換關(guān)鍵字中的正則，然后執(zhí)行 eval：

var template = "
"+
  "
[repo.name]
"+
  "
[repo.description]
"+
  "
L：[repo.language]S：[repo.stargazers_count]F：[repo.forks_count]
"+
  "
";

這個(gè)時(shí)候連顯示的樣式也 copy 過來了，不過那個(gè)博客中用的是浮動(dòng)，我用的是 flex 作為基本布局。具體請參考 demo 中的樣式吧。

這個(gè)樣式并不是固定的，可以根據(jù)自己的需求來改變。下圖是生成 project 的 html 圖：

然后我把它應(yīng)用到我的博客，projects 地址在這 我的項(xiàng)目 | 漁人。改了點(diǎn)東西，比如 loading 圖標(biāo)變了，language star fork 全被我換成圖標(biāo)。

歡迎到我的博客交流。