JavaScript模块未正确递增数字

我一直在努力学习如何用JavaScript编写模块。通过这次尝试，我尝试在页面加载时从Flickr加载10张图片，然后在用户滚动到页面底部时再加载10张图片。这不是持续发射，我不知道为什么

我想在页面加载时加载10张图片，然后每次用户向下滚动到页面底部时再加载10张图片

我认为问题在于使用

this.settings.curPage

调用的

curPage

属性

使用

this.settings.curPage++

我不确定，但我认为问题在于

jaxPhotos

方法或

scrollMorePics

方法

这是我的模块的一个小摆设：

这是我的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();
})();

var FlickrModule=（函数（$element）{
var flickrFeed=函数（）{
此.$element=$element；
this.init（）；
};
flickrFeed.prototype.init=函数（）{
this.setOptions（）
.jaxPhotos（this.settings.curPage）
.onScrollHandler（）；
};
flickrFeed.prototype.setOptions=函数（）{
var options=this.$element.data（）.options；
var默认值={
searchQuery:“”，
标记查询：“”，
标记模式：“”，
图片页面：“1”，
第页：1
}
this.settings=$.extend（{}，默认值，选项）；
归还这个；
};
flickrFeed.prototype.jaxPhotos=函数（页码）{
var self=这个；
//对flickr json的ajax调用
$.ajax({
url:'//api.flickr.com/services/rest/？method=flickr.photos.search&api_key=xxxxxxxxxxxxxxxxx&tags='+this.settings.searchQuery+'&tag_mode='+this.settings.tagMode+'&page='+this.settings.picsPerPage+'&format=json&jsoncallback='，
数据类型：“jsonp”，
数据：JSON，
成功：功能（数据）{
//开始组装一些dom元素以环绕每个页面
var pageTxtWrap=document.createElement（'div'），
pageTxt=document.createElement（'p'）；
pageTxt.textContent='Page'+pageNumber+'-向下滚动查看更多图片！'；
pageTxt.innerText='Page'+pageNumber+'-向下滚动查看更多图片！'；
pageTxtWrap.className='pageTextWrap'；
pageTxtWrap.appendChild（pageTxt）；
//使用createDocumentFragment（），因为它是创建元素的最快方法
var docFragPageHdr=document.createDocumentFragment（）；
docFragPageHdr.appendChild（pageTxtWrap）；
document.body.appendChild（docFragPageHdr）；
//创建变量，以便更轻松地访问我们正在使用的JSON树
flickr=data.photos，
flickrLength=flickr.photo.length；
//运行我们刚刚得到的JSON并组装图片
对于（变量i=0；i$（文档）.height（）-50）{
log（'beforeajaxcurpage='，this.settings.curPage）；
this.jaxPhotos（this.settings.curPage）；
log（'After ajax curPage='，this.settings.curPage）；
};
归还这个；
};
返回flickrFeed；
}（$（'.flickrContainer'））；
（功能（）{
var myModule=new FlickrModule（）；
})();

关于如何基于代码访问实例变量和方法的小示例：

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);

});

---

为什么要在原型函数中返回此

$element
应该作为一个参数传递给构造函数（因为您将它作为一个实例变量附加，我假设您希望它对于每个实例都是唯一的）。实际上，我仍在试图弄清楚这一点
这个
应该是对flickrFeed对象的引用，我想我应该返回它。在这种情况下，这样做没有意义。您是否计划创建多个实例？否则，我将返回一个对象而不是构造函数。我希望能够返回多个实例。在这种情况下，这可能没有意义，因为一旦页面被滚动，就要加载更多的图片。但我想制作一个可用于多个实例的模块。如果您希望
此
在每个原型扩展中都可用，作为对flickrFeed的引用，您可以使用原型对象而不是单个扩展来扩展flickrFeed，这实际上可能会使阅读更容易。只需使用
flickrFeed.prototype={jaxPhotos:function（）{…}，setOptions:function（）{…}，等等。
此外，如果要使用prototype扩展函数对象，则不需要在每个函数中返回
this