JavaScript模塊沒有正確遞增數字

Question

我一直在試圖學習如何在JavaScript中編寫模塊。有了這個嘗試，我試圖在頁面加載時從Flickr加載10張圖片，然後在用戶滾動到頁面底部時再加載10張圖片。這不是一直髮射，我不知道爲什麼。

我想在頁面加載時加載10張圖片，然後每當用戶滾動到頁面底部時再添加10張圖片。

我認爲這個問題是與curPage屬性，使用this.settings.curPage

curPage稱爲使用this.settings.curPage++

我不知道在jaxPhotos方法遞增，但我認爲這個問題是無論是jaxPhotos方法或者scrollMorePics方法。

這裏是我的模塊小提琴：http://jsfiddle.net/R3Bt7/

這裏是我的HTML：

<div class="flickrContainer" data-options='{"searchQuery" : "candy", "tagQuery" : "candy", "tagMode": "all", "picsPerPage" : "10", "curPage" : 1}'> 

</div> 

這裏是我的JS：

var FlickrModule = (function ($element) { 

    var flickrFeed = function() { 
    this.$element = $element; 

    this.init(); 
    }; 

    flickrFeed.prototype.init = function() { 
    this.setOptions() 
     .jaxPhotos(this.settings.curPage) 
     .onScrollHandler(); 
    }; 

    flickrFeed.prototype.setOptions = function() { 
    var options = this.$element.data().options; 

    var defaults = { 
     searchQuery : '', 
     tagQuery : '', 
     tagMode : '', 
     picsPerPage: '1', 
     curPage: 1 
    } 

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

    return this; 
    }; 

    flickrFeed.prototype.jaxPhotos = function (pageNumber) { 
    var self = this; 

    // ajax call to flickr json 
    $.ajax({ 
     url: '//api.flickr.com/services/rest/?method=flickr.photos.search&api_key=xxxxxxxxxxxxxxxxxxxx&tags=' + this.settings.searchQuery + '&tag_mode=' + this.settings.tagMode + '&page=' + this.settings.currPage + '&per_page=' + this.settings.picsPerPage + '&format=json&jsoncallback=?', 
     dataType: 'jsonp', 
     data: JSON, 
     success: function (data) { 

      // start assembling some dom elements to wrap around each page 
      var pageTxtWrap = document.createElement('div'), 
      pageTxt= document.createElement('p'); 

      pageTxt.textContent = 'Page ' + pageNumber + ' - Scroll down for more pictures!'; 
      pageTxt.innerText = 'Page ' + pageNumber + ' - Scroll down for more pictures!'; 

      pageTxtWrap.className = 'pageTextWrap'; 

      pageTxtWrap.appendChild(pageTxt); 

      // Use createDocumentFragment() as it is the fastest method of element creation 
      var docFragPageHdr = document.createDocumentFragment(); 
      docFragPageHdr.appendChild(pageTxtWrap); 
      document.body.appendChild(docFragPageHdr); 

      // create variables for easier access to the JSON trees we're using 
      flickr = data.photos, 
      flickrLength = flickr.photo.length; 

      // run through the JSON we just got and assemble the pictures 
      for (var i = 0; i < flickrLength; i++) { 
       var farmId = flickr.photo[i].farm, 
       serverId = flickr.photo[i].server, 
       photoId = flickr.photo[i].id, 
       secretId = flickr.photo[i].secret, 
       imgTitle = flickr.photo[i].title; 

       var flickImg = document.createElement('img'); 

       flickImg.className = 'flickerImg'; 
       flickImg.id = 'flickImg'+i; 
       flickImg.title = imgTitle; 
       flickImg.src = 'http://farm' + farmId + '.staticflickr.com/' + serverId + '/' + photoId + '_' + secretId + '_m.jpg'; 

       var docFragFlickImg = document.createDocumentFragment(); 
       docFragFlickImg.appendChild(flickImg); 
       document.body.appendChild(docFragFlickImg); 
      } 
     } 
    }); 

    // increase currPage so we can go to the next page of pictures 
    this.settings.curPage++; 

    return this; 
    }; 

    flickrFeed.prototype.onScrollHandler = function() { 
    $(document).on('scroll', this.scrollMorePics.bind(this)); 

    return this; 
    }; 

    flickrFeed.prototype.scrollMorePics = function(){ 
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) { 
     console.log('Before ajax curPage = ', this.settings.curPage); 
     this.jaxPhotos(this.settings.curPage); 
     console.log('After ajax curPage = ', this.settings.curPage); 
    }; 

    return this; 
    }; 

    return flickrFeed; 

}($('.flickrContainer'))); 

(function() { 
    var myModule = new FlickrModule(); 
})(); 

Answer 1

你如何可以訪問實例變量和方法的小例子根據您的代碼：

var FlickrModule = (function ($) { 

    var flickrFeed = function ($element) { 

     this.$element = $element; 
     this.init(); 
    }; 

    flickrFeed.prototype.init = function(){ 
     console.log('init', this.$element); 
    }; 

    return flickrFeed; 

})(jQuery); 

$(function(){ 

    var $container = $('.flickrContainer'), 
     fm = new FlickrModule($container); 

}); 

http://jsfiddle.net/5nJqM/