试图保持干燥

时间:2018-09-24 14:30:44

标签: javascript javascript-objects dry

我写了一些JavaScript,它们创建一个对象数组,然后对该数组执行一些操作。此刻,每次我想使用它时,都需要重新填充数组,然后运行其他两个函数。这是我的用法:

queue_obj.build_queue_object($('.section_pane.visible .queue_list .post_row:not(.hidden)'))
.initialise_queue_view()
.add_event_listeners();

我必须在我的所有代码库中编写此代码,这并不理想。是否可以进行更改,以便我可以从一个地方使用它。

即初始化一次数据。如果更改,请重新初始化或更新。

下面是完整代码:

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

var queue_obj = {
    'items' : [],
    build_queue_object : function(posts) {
        $(window).off('scroll resize');
        this.items = [];
        var that = this;
        $(posts).each(function(i, el){
            that.items[i] = {
                element : $(this),
                child_element : $(this).find('.post_row_inner')
            }
        });

        return this;
    },

    initialise_queue_view : function() {
        this.items.forEach(function(obj, i){
            if(obj.element.isInViewport())
            {
                obj.child_element.removeClass('pagination_hidden');
            }
            else
            {
                obj.child_element.addClass('pagination_hidden');
            }
        });

        return this;
    },

    add_event_listeners : function() {
        var that = this;
        $(window).on('scroll resize', function(){
            that.initialise_queue_view();
        });
    }
};

0 个答案:

没有答案