规范变更 - 如何重构我的 JavaScript 逻辑？

Question

这可能非常简单，但目前我想不出一个好方法来做到这一点（有一个完整的大脑放屁）。

我目前有一个脚本，可以从 YouTube 频道获取视频，并显示当前视频和下面的 3 个缩略图，并使用左右箭头导航到前一个或后三个缩略图以选择要观看的另一个视频。

规范刚刚（再次）更改，现在单击箭头时只需向左或向右移动 1 个而不是 3 个。

即：

当前逻辑：

<<    [1] [2] [3]  >>  **click right** << [4] [5] [6] >>

所需逻辑

<<    [1] [2] [3]  >>  **click right** << [2] [3] [4] >>

代码：

var youtube = 
{
    author    : "XXXXXXX",
    pageNr    : 0,
    pageSize  : 3,
    pageCount : 1,
    videos    : [],
    gets      : function()
    {
        var _this = this;
        var url = "http://gdata.youtube.com/feeds/api/videos?author=" + this.author + "&start-index=" + (this.pageNr * this.pageSize + 1) + "&max-results=" + this.pageSize + "&v=2&orderby=published&alt=json-in-script&fields=openSearch:totalResults,entry(id,title,media:group(media:thumbnail,yt:videoid),yt:statistics)";
        $.getJSON(url + "&callback=?",
        function(response)
        {
            _this.show(response.feed.entry);
        });
    },
    start     : function()
    {
        var _this = this;
        var url = "http://gdata.youtube.com/feeds/api/videos?author=" + this.author + "&start-index=" + (this.pageNr * this.pageSize + 1) + "&max-results=" + this.pageSize + "&v=2&orderby=published&alt=json-in-script&fields=openSearch:totalResults,entry(id,title,media:group(media:thumbnail,yt:videoid),yt:statistics)";
        $.getJSON(url + "&callback=?",
        function(response)
        {
            _this.pageCount = Math.floor(response.feed.openSearch$totalResults.$t / 3);
            _this.show(response.feed.entry);
            $(".video-thumb").eq(0).click();
        });
    },
    next      : function()
    {
        if(this.pageNr >= this.pageCount){ return; }
        this.pageNr++;

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");

        this.gets();
    },
    prev      : function ()
    {
        if(this.pageNr <= 0){ return; }
        this.pageNr--;

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");

        this.gets();
    },
    show      : function(videos)
    {
        var _this = this;
        _this.videos = [];
        $(videos).each(function(index,video)
        {
            _this.videos.push(
            {
                id         : video.media$group.yt$videoid.$t,
                title      : video.title.$t,
            viewCount  : (video.yt$statistics && video.yt$statistics.viewCount ? video.yt$statistics.viewCount : 0),
            thumbnails : video.media$group.media$thumbnail
        });
    });

    $(".video-thumb-picture").each(function(index,div)
    {
        var video = index < _this.videos.length ? _this.videos[index] : { id : "", title : "", viewCount : 0, thumbnails : [{ url : "" }]  };
        $(div)
        .css("background-image","url('" + video.thumbnails[0].url + "')")
        .parent().next().html(video.title)
        .parent().css("visibility",(index < _this.videos.length) ? "visible" : "hidden");
    });
}
};

var appId = '';
window.fbAsyncInit = function()
{
    FB.init(
    {
        appId  : appId,
        status : true,
        cookie : true,
        xfbml  : true
    });

    FB.Canvas.setAutoResize();
};

$(function()
{
        $(".arrow-left").click(function()
    {
        youtube.prev();
    });
    $(".arrow-right").click(function()
    {
        youtube.next();
    });
    youtube.start();

    $("#div-share").unbind('click').click(function()
    {
        FB.ui(
        {
        method : 'feed',
        name   : '',
        link   : ''
        });
    });

    $(".video-thumb").click(function()
    {
        var div = $(this);
        if(div.css("visibility") == "hidden"){ return; }

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");
        div.children().first().addClass("selected").parent().parent().addClass("selected");

        var videoNr = parseInt(div.attr("videonr"));

        var video = youtube.videos[videoNr];
        var html = '<object id="div-video" style="height: 270px; width: 425px" width="425">';
        html += '<param name="play" value="true">';
        html += '<param name="wmode" value="transparent">';
        html += '<param name="movie" value="http://www.youtube.com/v/' + video.id + '?autohide=1&autoplay=1&fs=1&feature=player_embedded" />';
        html += '<param name="allowFullScreen" value="true" />';
        html += '<param name="allowScriptAccess" value="always" />';
        html += '<embed src="http://www.youtube.com/v/' + video.id + '?autohide=1&autoplay=0&fs=1&feature=player_embedded" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="270" wmode="transparent"></embed>';
        html += '</object>';
        $("#div-video").html(html);

        $("#div-video-title").html(video.title);
        $("#b-video-views").html(video.viewCount);

        $("#div-like").html('<fb:like href="http://www.youtube.com/watch?v=' + video.id + '" show_faces="false" width="350"></fb:like>');
        FB.XFBML.parse(document.getElementById('div-like'));

        $("#div-share").unbind('click').click(function()
        {
                FB.ui(
            {
                method : 'feed',
                name   : video.title,
                link   : ''
            });
        });
     });
 });

Answer 1

在 gets() 和 start():

"&start-index=" + (this.pageNr + 1)

在 start():

_this.pageCount = (response.feed.openSearch$totalResults.$t > _this.pageSize) ?
  (response.feed.openSearch$totalResults.$t - _this.pageSize) : (0);

就像 aepheus 提到的那样，此时我可能会将 pageNr 重命名为 curIndex （或类似的名称）。

Answer 2

听起来您希望下一个是单个页面，而不是页面。在这种情况下，您可能希望跟踪当前索引并递增它。您可以通过对页面大小和起始页进行一些数学计算来完成此操作，但仅跟踪当前索引会简单得多。

this.curIndex = 1;
..."&start-index=" + (++this.curIndex)...

另外，当 curIndex 是页面大小的倍数时，您只想更改起始页。