我写了一些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();
});
}
};