优化 div + 屏幕调整大小 JS 块

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在用户调整他的window大小时不会做很多计算，0.2秒的延迟应该足够快，所以用户赢了感觉有点延迟（或者你可以把RESIZE_DELEY调小一点）
除非您使用的库会与 jquery 发生冲突，否则最好保持代码风格相同，因此我将所有 jQuery(foo).bar 更改为 $(foo).bar 以保持一致性。

我相信这应该是我们能做的最多的事情了，如果没有像 jsfiddle 这样的例子来演示这段代码的用途。

优化 div + 屏幕调整大小 JS 块

optimizing div + screen resize JS block

javascript

html

optimization

resize

screen