javascript - 如何增强这个小功能

Question

我们如何将这两者合并在一起以增强功能并使其更易于编辑。

顶部的一个是在屏幕调整大小时触发功能，另一个是在加载时检测屏幕尺寸。

整个函数:

(function(){
  //detect the width on page load//
  $(document).ready(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox'));
    }
  });
  //update the width value when the browser is resized//
  $(window).resize(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox')); 
    }
  });
})(jQuery);

顶部:

    (function(){
    //detect the width on page load//
     $(document).ready(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox'));
    }
  });

底部:

  //update the width value when the browser is resized//
  $(window).resize(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox')); 
    }
  });
})(jQuery);

Answer 1

如果它们完全相同，只需创建一个单独的函数并在这些事件上调用它。

$(function(){
  //detect the width on page load//
  $(document).ready(handleResize);  // Notice you're already in the ready event
                                    // on this line so you can just call it here

  //update the width value when the browser is resized//
  $(window).resize(handleResize);
});

function handleResize(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox'));
    }
}