javascript - 如何扩展用匿名函数创建的对象原型(prototype)

Question

我正在使用“scrollPagination”javascript 进行 ajax 分页。 这是一个代码:

(function( $ ){
    $.fn.scrollFeedPagination = function(options) {
        var opts = $.extend($.fn.scrollFeedPagination.defaults, options);  
        var target = opts.scrollTarget;
        if (target == null){
            target = obj; 
        }
        opts.scrollTarget = target;

        return this.each(function() {
            $.fn.scrollFeedPagination.init($(this), opts);
        });
    };
    $.fn.stopScrollPagination = function(){
        return this.each(function() {
            $(this).attr('scrollPagination', 'disabled');
        });
    };
    $.fn.scrollFeedPagination.loadContent = function(obj, opts){
        console.log(opts);
        var target = opts.scrollTarget;
        var mayLoadContent = ($(target)[0].scrollHeight - $(target).scrollTop()) == $(target).height();
        if (mayLoadContent){
            if (opts.beforeLoad != null){
                opts.beforeLoad(); 
            }
            $(obj).children().attr('rel', 'loaded');
            $.ajax({
                type: 'POST',
                url: opts.contentPage,
                data: opts.contentData,
                success: function(data){
                    console.log(data);
                    console.log(1);
                    var selector = target.selector;
                    var response = $(data).find(selector).children();
                    $(obj).append(response);
                    var objectsRendered = $(obj).children('[rel!=loaded]');
                    if (opts.afterLoad != null){
                        opts.afterLoad(objectsRendered);    
                    }
                },
                dataType: 'html'
            });
        }
    };

    $.fn.scrollFeedPagination.init = function(obj, opts){
        var target = opts.scrollTarget;

        $(obj).attr('scrollPagination', 'enabled');
        $(target).scroll(function(event){
            if ($(obj).attr('scrollPagination') == 'enabled'){
                $.fn.scrollFeedPagination.loadContent(obj, opts);       
            }
            else {
                event.stopPropagation();    
            }
        });
        $.fn.scrollFeedPagination.loadContent(obj, opts);
    };
    $.fn.scrollFeedPagination.defaults = {
        'contentPage' : null,
        'contentData' : {},
        'beforeLoad': null,
        'afterLoad': null   ,
        'scrollTarget': null,
        'heightOffset': 0         
    };  
})( jQuery );

当我在一个节点上初始化它时它工作正常。 但是两个节点相互干扰:

例子:

node1.pagination({
'contentPage': ajaxurl,
    'contentData': {
         action: 'chat_pagination',
         'last_time' : last_time,
    },
    'scrollTarget': node1, 
    'beforeLoad': function() {},
    'afterLoad': function(elementsLoaded) {
        last_time = node1.children('div').last().data('last-id');
    }
});

它可以工作，但只要我初始化另一个

node2.pagination({
'contentPage': ajaxurl,
    'contentData': {
         action: 'feeds_pagination',
         'last_time' : last_time,
    },
    'scrollTarget': node2, 
    'beforeLoad': function() {},
    'afterLoad': function(elementsLoaded) {
        last_time = node2.children('div').last().data('last-id');
    }
});

现在 node1 使用 node2 的 last_time 更新，ajax 操作也是“feeds_pagination”。

现在要解决这个问题，我需要有两个 scrollFeedPagination() 实例； 是否可以使用这样的语法进行扩展？

Answer 1

var opts = $.extend($.fn.scrollFeedPagination.defaults, options);

注意 $.extend 的第一个参数是正在扩展的对象(在其余参数中具有对象的属性)，也是 returned 函数的结果。所以你基本上是在设置

var opts = $.fn.scrollFeedPagination.defaults
// extend it then:
$.extend(opts, options);

如您所见，您的 opts 对象实际上是同一事物，第二次扩展它会覆盖第一次配置。相反，从一个新的空对象开始，首先使用默认值扩展它，然后使用选项参数:

var opts = $.extend({}, $.fn.scrollFeedPagination.defaults, options);