如何更好地重新訂購我的JavaScript代碼？

我想讓我的代碼更整潔，不那麼容易混淆。下面的代碼：如何更好地重新訂購我的JavaScript代碼？

// NAV BAR // 
$(window).on("scroll resize", function() { 
if($(window).width() > 980) { 
    if($(window).scrollTop() > 20) { 
    //add black background 
    $(".x-navbar").addClass("active"); 
    $(".x-navbar .desktop .x-nav li a").addClass("small-bar"); 
    } 
    else { 
    //remove background 
    $(".x-navbar").removeClass("active"); 
    $(".x-navbar .desktop .x-nav li a").removeClass("small-bar"); 
    } 
}else{ 
    // if window width < 980 
    //remove background 
    $(".x-navbar").removeClass("active"); 
    $(".x-navbar .desktop .x-nav li a").removeClass("small-bar"); 
} 
});

它所做的只是獲取屏幕的寬度，只要用戶向下滾動，它通過給它一個更小的高度，並使用類活性不同的背景restyles頭和小酒吧。我在這裏和那裏得到了代碼，所以它有點麻煩，是不是有辦法用較少的字符串來編寫代碼，並使其更有效率？

來源

2015-11-10 Paolo Mangia

似乎是一個代碼審查問題 – juvian

效率/性能的問題是題外話這裏，但-話題[代碼審查（http://codereview.stackexchange.com/），尤其是如果代碼正在工作（如你的情況）。 – hindmost

下一次，請使用CodeReview對於這種或目的（工作代碼，需要審查）。

這裏的回顧：

// 1. Store each selector into a variable 
// 2. Create a method to do the job and use `.toggleClass()` with its second parameter 
// 3. Work with events and calling to the method when necessary. 

$(window).on("scroll resize", function() { 
    var $win = $(this); 
    var $target = $('.x-navbar'); 
    var $subselector = $('.desktop .x-nav li a', $target); 

    /** 
    * @param {boolean} action Set to true to show, false to hide 
    */ 
    var DoJob = function(action){ 
     $target.toggleClass('active', action); 
     $subselector.toggleClass('small-bar', action); 
    }; 

    if($win.width() > 980){ 
     if($win.scrollTop() > 20) DoJob(true); 
     else DoJob(false); 
    } 
    else DoJob(false); 
});

來源

2015-11-10 21:12:13 kosmos

你可以同時做兩個檢查，刪除重複的代碼：

// NAV BAR // 
var $window = $(window); 
$window.on("scroll resize", function() { 
    var showBG = $window.width() > 980 && $window.scrollTop() > 20; 
    if (showBG) { 
    //add black background 
    $(".x-navbar").addClass("active"); 
    $(".x-navbar .desktop .x-nav li a").addClass("small-bar"); 
    } 
    else { 
    //remove background 
    $(".x-navbar").removeClass("active"); 
    $(".x-navbar .desktop .x-nav li a").removeClass("small-bar"); 
    } 
});

來源

2015-11-10 20:51:56 TbWill4321

在他的邏輯背景中刪除每次當贏得寬度小於980時，在您的代碼中，如果滾動<= 20且贏得寬度超過980，則背景將被刪除，並且不需要您需要添加的所有狀態 'else if（$ win.width（）<= 980）{' –

他的其他塊被重複，所以我們只需要一個工作。在OP和我的代碼中，背景都將被刪除，以便進行測試。哪裏有問題？ – TbWill4321

var $win = $(window); 
var nav = $(".x-navbar"); 
var navLinks = nav.find(".desktop .x-nav li a"); 

$win.on("scroll resize", function() { 
    if($win.width() > 980 && $win.scrollTop() > 20) { 
    nav.addClass("active") 
    navLinks.addClass("small-bar"); 
    } 
    else if($win.width() <= 980){ 
    nav.removeClass("active") 
    navLinks.removeClass("small-bar"); 
    } 
}

來源

2015-11-10 20:59:01

如何更好地重新訂購我的JavaScript代碼？

回答

相關問題