Question

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

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

我认为问题在于使用curPage

调用的this.settings.curPage属性

使用jaxPhotos

在this.settings.curPage++方法中增加curPage

我不确定，但我认为问题出在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/

JavaScript模块没有正确递增数字

1 个答案: