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

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

以前學前端，就只是學 HTML，CSS 和 JS，看書，看視頻，大概這樣的日子持續了好幾個月，不能說沒有一點效果，至少一些前端的基本概念都有所了解。慢慢地，開始接觸到 GitHub，發現這里真是前端學習的一個高效場所。一個前端er，如果不逛 GitHub，必定是一個失敗的前端，因為在 GitHub，視野可以得到很大的擴展。后來索性把瀏覽器主頁也設置成了 GitHub。

發現好多大公司在招實習生和應屆生的時候，也開始慢慢的關注應聘者的 GitHub 的信息，有時候在做一些網測題的時候，會看到輸入 GitHub 地址或博客地址，其實，有時候你不夠優秀的原因是因為你不會 show yourself。

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

GitHub 項目地址在這，Demo 地址在這。

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

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

使用也很簡單，設置了一個 option 配置對象，參數可選，如下：

//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"]
  }
});

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

參數中，name 表示 github 的名稱，maxNum 表示是否限制顯示的條目，默認顯示全部，如果 maxNum 超過最大項目數，也顯示全部。因為這個 js 是動態從 GitHub 加載的，訪問速度很慢的時候，loading 相當于提示作用，也可以設置成其他內容。filter 是一個過濾器，表示一些不想顯示的項目，可選 id 和 name 兩種方式。

來看看 showProjects 函數中的內容，以下是一些參數設置：

var projects = this;

// no github name
if(!option || !option.name){
  projects.html("
參數錯誤
請設置 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 數據之前，建議先自己訪問一下 https://api.github.com/users/songjinzhong/repos?type=owner，了解數據格式。其中會用到的數據格式有 html_url, name, description, language, stargazers_count, forks_count。

// 先設置 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 項目
    data = data.filter(function(a){
      return null != a.description && a.fork == false && name.indexOf(a.name) == -1 && id.indexOf(a.id) == -1; 
    });
    // 排序操作，安裝 star 數和 fork 數排序
    data = data.sort(function(a, b){
      return b.stargazers_count - a.stargazers_count|| b.forks_count - a.forks_count;
    })
    var item = "";
    // 實現如果設置 maxNum 的情況
    if(option.maxNum > 0 && option.maxNum < data.length){
      data = data.slice(0,option.maxNum);
    }
    // 對剩下的 data 每一項都添加到 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 來替換關鍵字中的正則，然后執行 eval：

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

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

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

然后我把它應用到我的博客，projects 地址在這 我的項目 | 漁人。改了點東西，比如 loading 圖標變了，language star fork 全被我換成圖標。

歡迎到我的博客交流。