jquery-githup 项目解析

项目结构

– css
     – style.css
– font
     –Museo_Slab_500-webfont.woff
– img
     – githup-cat.png
– js
     –jquery.github.js
     –jquery-3.3.1.js
index.html

index.html

<div class="projects">
        <div data-repo="jquery-boilerplate/jquery-boilerplate" class="github-box-wrap"></div>
        <div data-repo="zenorocha/dracula-theme" class="github-box-wrap"></div>
        <div data-repo="zenorocha/jquery-github" class="github-box-wrap"></div>
        <div data-repo="zenorocha/hub.me" class="github-box-wrap"></div>
</div>
...
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/jquery.github.js"></script>

<script>
    $("[data-repo]").github();
</script>

jquery.github.js

// -- Github Repository -------------------------------
function GithubRepo( repo ) {
    this.description = repo.description;
    this.forks = repo.forks_count;
    this.name = repo.name;
    this.open_issues = repo.open_issues;
    this.pushed_at = repo.pushed_at;
    this.url = repo.html_url;
    this.stargazers = repo.stargazers_count;
}

// Parses HTML template
GithubRepo.prototype.toHTML = function () {
    this.pushed_at = this._parsePushedDate( this.pushed_at );
    return $("<div>...</div>");
};

// Parses pushed_at with date format
GithubRepo.prototype._parsePushedDate = function ( pushed_at ) {
    var date = new Date( pushed_at );

    return date.getDate() + "/" + ( date.getMonth() + 1 ) + "/" + date.getFullYear();
};

// -- Github Plugin ------------------------------------
function Github( element, options ) {
    var defaults = {
                iconStars:  true,
                iconForks:  true,
                iconIssues: false
            };

    this.element    = element;
    this.$container = $( element );
    this.repo       = this.$container.attr( "data-repo" );

    this.options = $.extend( {}, defaults, options ) ;

    this._defaults = defaults;

    this.init();
}

// Initializer
Github.prototype.init = function () {
    var cached = this.getCache();

    if ( cached !== null ) {
        this.applyTemplate( JSON.parse( cached ) );
        return;
    }
    //fetch数据
    this.requestData( this.repo );
};

// Display or hide icons（初始化图标）
Github.prototype.displayIcons = function () {
    var options = this.options,
            $iconStars = $( ".repo-stars" ),
            $iconForks = $( ".repo-forks" ),
            $iconIssues = $( ".repo-issues" );

    $iconStars.css( "display", options.iconStars ? "inline-block" : "none" );
    $iconForks.css( "display", options.iconForks ? "inline-block" : "none" );
    $iconIssues.css( "display", options.iconIssues ? "inline-block" : "none" );
};

// Request repositories from Github
Github.prototype.requestData = function ( repo ) {
    var that = this;

    $.ajax({
        url: "https://api.github.com/repos/" + repo,
        dataType: "jsonp",
        success: function( results ) {
            var result_data = results.data,
                isFailling = results.meta.status >= 400 && result_data.message;
            //使用isFalling 防止if太长
            if ( isFailling ) {
                //调用this下的handleErrorRequest()方法
                that.handleErrorRequest( result_data );
                return;
            }

            that.handleSuccessfulRequest( result_data );
        }
    });
};

// Handle Errors requests
Github.prototype.handleErrorRequest = function ( result_data ) {
    console.warn( result_data.message );//警告
    return;
};

// Handle Successful request
Github.prototype.handleSuccessfulRequest = function ( result_data ) {
    this.applyTemplate( result_data );
    this.setCache( result_data );
};

// Stores repostories in sessionStorage if available
Github.prototype.setCache = function ( result_data ) {
    // Cache data 
    if ( window.sessionStorage ) {
        window.sessionStorage.setItem( "gh-repos:" + this.repo, JSON.stringify( result_data ) );
    }
};

// Grab cached results
Github.prototype.getCache = function() {
    if ( window.sessionStorage ) {
        return window.sessionStorage.getItem( "gh-repos:" + this.repo );
    }
    else {
        return false;
    }
};

// Apply results to HTML template
Github.prototype.applyTemplate = function ( repo ) {
    //实例化一个数据对象repo
    var githubRepo = new GithubRepo( repo ),
    //调用下的实例方法
    $widget = githubRepo.toHTML();//widget:小部件
    //append到dom上
    $widget.appendTo( this.$container );
    //显示字体图标，有顺序关系
    this.displayIcons();
};

// -- Attach plugin to jQuery's prototype -----------

;( function ( $, window, undefined ) {

    //可以$("#div").githup()调用
    $.fn.github = function ( options ) {
        return this.each(function () {

            //数据存储
            if ( !$( this ).data( "plugin_github" ) ) {
                $( this ).data( "plugin_github", new Github( this, options ) );
            }
        });
    };

}( window.jQuery || window.Zepto, window ) );