如何更好地重新排序我的JavaScript代碼？

Question

我想使我的代碼更整潔，更容易混淆。 這是代碼：

  // 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");
 }
 });

它所做的只是獲取屏幕的寬度，並且當用戶向下滾動時，它會通過使用active和small-bar類為標題提供較小的高度和不同的背景來重新設置標題的樣式。 我到處都是代碼，所以有點混亂，沒有辦法用更少的字符串編寫代碼並提高效率嗎？

Answer 1

您可以一次執行兩項檢查，以刪除重復的代碼：

// 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");
  }
 });

Answer 2

下次，請出於此類目的使用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);
});

Answer 3

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");
   }
}