jQuery调整大小并准备好文档组合

时间:2018-08-16 08:58:16

标签: javascript jquery resize

我有这个JS函数,可以从依赖于屏幕大小的类中删除该类。有用  仅当您调整屏幕大小时(我相信这是预期的行为),但是,我也需要在加载时进行此操作。

require(['jquery'], function(){
    jQuery(window).resize(function() {
        var innerWidth = window.innerWidth;
        if (innerWidth < 800) {
            jQuery("#logo-container").removeClass('pull-left');
        } else if (innerWidth > 800) {
            jQuery("#logo-container").addClass('pull-left');
        }
    });
});

我用document.ready包装了该函数,并在resize事件之前添加了相同的内容。现在有这样的东西:

require(['jquery'], function(){
    jQuery(document).ready(function() {
        var innerWidth = window.innerWidth;
        if (innerWidth < 800) {
            jQuery("#logo-container").removeClass('pull-left');
        } else if (innerWidth > 800) {
            jQuery("#logo-container").addClass('pull-left');
        }
        jQuery(window).resize(function() {
            var innerWidth = window.innerWidth;
            if (innerWidth < 800) {
                jQuery("#logo-container").removeClass('pull-left');
            } else if (innerWidth > 800) {
                jQuery("#logo-container").addClass('pull-left');
            }
        });
    });
});

现在,函数的结果是我想要的,但是,我感觉就像在重复代码。

这是正确的方法吗?有更好的替代方法吗?

任何建议都会受到赞赏。

2 个答案:

答案 0 :(得分:2)

避免重复代码。

制作一个函数,并在文档就绪函数和窗口调整大小函数上调用它...

  

在下面的代码中,所有代码都转到OnScreenResized()函数。

require(['jquery'], function() {
      jQuery(document).ready(function() {
        OnScreenResized();

      });

      jQuery(window).resize(function() {
        OnScreenResized();
      });

      function OnScreenResized() {
        var innerWidth = window.innerWidth;

        if (innerWidth < 800) {
          jQuery("#logo-container").removeClass('pull-left');
        } else if (innerWidth > 800) {
          jQuery("#logo-container").addClass('pull-left');
        }
      }
    });

答案 1 :(得分:1)

需要记住的一点是,如果您需要复制并粘贴完全相同的代码块,那么始终是将其重构为函数调用的好时机:

require(['jquery'], function(){
    jQuery(document).ready(function() {
        jQuery(window).resize(function() {
            toggleClass();
        });
        toggleClass();
    });

    function toggleClass() {
        var innerWidth = window.innerWidth;
        if (innerWidth < 800) {
            jQuery("#logo-container").removeClass('pull-left');
        } else if (innerWidth > 800) {
            jQuery("#logo-container").addClass('pull-left');
        }
    }
});