優化div +屏幕大小JS塊

Question

我正在努力弄清楚什麼是優化此代碼的最佳方法。我目前只使用width @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); 
}); 

的理念是：

1. 拉出所有將要一次又一次的質疑，像$('.hs-info .btn-slide')和$('.hs-info p, .hs-sponsor')的元素，也$('.hs-caption')似乎得到廣泛的應用，將其拉出。
2. 對變量做同樣的事情，在這裏我不確定你是否會使用setToCenterOfParent其他元素，但我會嘗試輸入jquery包裹的元素，所以我可以直接在他們的函數中使用jquery。
3. elementWidth/elementHeight這裏不清楚它是否會改變，所以我仍然沒有編輯代碼。
4. 添加一個settimeout來調整大小，所以jquery在用戶調整窗口大小時不會執行大量計算，並且0.2秒的延遲應該足夠快，以便用戶不會感覺到延遲（或者您可以將RESIZE_DELEY調整爲偶數較小的數字）。
5. 除非你使用的某些庫會與jquery發生衝突，請保持代碼樣式相同，因此我將所有jQuery(foo).bar更改爲$(foo).bar以保持一致性。

我相信這應該是我們能做的最多的，如果沒有像jsfiddle這樣的例子來演示這段代碼的用途。