Question

我正在努力弄清楚优化此代码的最佳方法。我目前只使用宽度@media标签，JS似乎是唯一可靠的方法，我可以控制一系列非常具体的变量来调整这个div元素。

目前我意识到这是一团糟，但我想得到反馈，看看是否有任何明显的问题。还在学习，所以对我很轻松。

感谢。

jQuery(document).ready(function($){
    var elementHeight = $('.hs-caption').height();
    var screenHeight = jQuery(window).height();
    var upcomingHeader = $('.fold-header').height() * 2.0;
    if (screenHeight > 960) {
    var heightOffset = 220;         
    } else {
    var heightOffset = 200; 
    } 
    var totalHeight = elementHeight + heightOffset;

function fullscreen(){
    jQuery('#hero').css({
        width: jQuery(window).width(),
        height: jQuery(window).height()
    });
}  
function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){
    parentWidth = $(parent).width();
    parentHeight = $(parent).height();  
    elementWidth = $(element).width();
    elementHeight = $(element).height();
    if(!ignoreWidth)
        $(element).css('left', parentWidth/2 - elementWidth/2);
    if(!ignoreHeight)
        $(element).css('top', heightOffset);
}   

function scalar(){
  if (window.innerHeight < (totalHeight * 1.25) + upcomingHeader) {
        console.log("screenHeight is less than elementHeight");       
        $('.hs-info p').css({
            display: 'none'
        }),
        $('.hs-info .btn-slide').css({
            padding: '10px 0px 0px 0px'
        }),
        $('.hs-sponsor').css({
            display: 'none'
        })
    } else {
        console.log("screenHeight is NOT less than elementHeight");       
        $('.hs-info .btn-slide').css({
            padding: '0px'
        }),
        $('.hs-sponsor').css({
            display: 'block'
        }),
        $(".hs-info p").css({
            display: 'block'
        })
    }
}

setToCenterOfParent( $('.hs-caption'), document.body, true, false);
fullscreen();
scalar();

jQuery(window).resize(function() {
    scalar();
    setToCenterOfParent( $('.hs-caption'), document.body, true, false);
    fullscreen();         
});

console.log("height:", elementHeight);
console.log("total height:", elementHeight + heightOffset); 
console.log("screenHeight:", screenHeight); 
console.log("heightOffset:", heightOffset); 
console.log("upcomingHeader:", upcomingHeader);     
});

Answer 1

由于目标不是很明确，我只能进行一些小代码编辑，以使其更易于阅读，并且可能会有一点性能提升。

jQuery(document).ready(function($) {
  // Define share variables.
  var element = $('.hs-caption');
  var elementWidth, elementHeight;
  var screenWidth, screenHeigth;
  var upcomingHeader = $('.fold-header').height() * 2.0;
  var heightOffset;
  var totalHeight;
  var HEIGHT_RATIO = 1.25;
  var paddingElements = $('.hs-info .btn-slide');
  var displayElements = $('.hs-info p, .hs-sponsor');
  var RESIZE_DELEY = 200;
  var delayedHandler = null;

  function onResize() {
    updateSetting();
    setToCenterOfParent(element, $(document.body), true, false);
    fullscreen();
    scalar();
  };

  function scalar() {
    var innerHeight = window.innerHeight;
    var totalElementHeight = totalHeight * HEIGHT_RATIO + upcomingHeader;
    var isScreenSmaller = (innerHeight < totalElementHeight);
    var padding = isScreenSmaller ? '10px 0px 0px 0px' : '0px';
    var display = isScreenSmaller ? 'none' : 'block';
    paddingElements.css('padding', padding);
    displayElements.css('display', display);
  }

  function updateSetting(){
    screenWidth = $(window).width();
    screenWidth = $(window).height();
    elementWidth = element.width();
    elementHeight = element.height();
    heightOffset = (screenHeight > 960) ? 220 : 200;
    totalHeight = elementHeight + heightOffset;
  }

  function fullscreen() {
    $('#hero').css({
      width: screenWidth,
      height: screenHeigth
    });
  }

  function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight) {
    var parentWidth = parent.width();
    var parentHeight = parent.width();
    if (!ignoreWidth) {
      element.css('left', parentWidth/2 - elementWidth/2);
    }
    if (!ignoreHeight) {
      element.css('top', heightOffset);
    }
  }

  // Init
  onResize();

  $(window).resize(function() {
    // Don't do this too often
    if (delayedHandler !== null) {
      clearTimeout(delayedHandler);
    }
    // Delayed the function to be executed, so it only updates when user stop
    // resizing for a fixed amount of time.
    delayedHandler = setTimeout(onResize, RESIZE_DELEY);
  });

  console.log("height:", elementHeight);
  console.log("total height:", elementHeight + heightOffset);
  console.log("screenHeight:", screenHeight);
  console.log("heightOffset:", heightOffset);
  console.log("upcomingHeader:", upcomingHeader);
});

这个想法是：

拉出将要再次查询的所有元素，例如$('.hs-info .btn-slide')和$('.hs-info p, .hs-sponsor')，$('.hs-caption')似乎也被广泛使用，将其拉出来。
对变量做同样的事情，这里我不确定你是否会将setToCenterOfParent用于其他元素，但是我会尝试输入jquery包含的元素，所以我可以直接在函数中使用jquery
elementWidth/elementHeight此处不清楚是否会改变，所以我仍然保留未编辑的代码。
添加settimeout来调整大小，因此jquery在用户调整窗口大小时不会进行大量计算，0.2秒的延迟应该足够快，这样用户就不会感到延迟（或者你可以调整RESIZE_DELEY到更小的数字）。
除非您使用的某些库与jquery冲突，否则请保持代码样式相同，因此我将所有jQuery(foo).bar更改为$(foo).bar以保持一致。

我相信这应该是我们能做的最多，如果没有像jsfiddle这样的例子，那就说明这段代码的用途。

优化div + screen resize JS块

1 个答案: