簡化動畫的冗餘JS/JQuery函數

我在自定義的JS頁面中發生了很多相同的函數，並且想知道簡單代碼和冗餘的最佳方式是什麼。（DRY？）簡化動畫的冗餘JS/JQuery函數

我對JS/Javascript仍然很陌生，希望改進導航在各個部分的工作方式，我將添加到此網頁中。

;(function() { 

'use strict'; 



// iPad and iPod detection 
var isiPad = function(){ 
    return (navigator.platform.indexOf("iPad") != -1); 
}; 

var isiPhone = function(){ 
    return (
     (navigator.platform.indexOf("iPhone") != -1) || 
     (navigator.platform.indexOf("iPod") != -1) 
    ); 
}; 

// Parallax 
var parallax = function() { 
    $(window).stellar(); 
}; 



// Burger Menu 
var burgerMenu = function() { 

    $('body').on('click', '.js-mi-nav-toggle', function(event){ 

     event.preventDefault(); 

     if ($('#navbar').is(':visible')) { 
      $(this).removeClass('active'); 
     } else { 
      $(this).addClass('active'); 
     } 



    }); 

}; 


var goToTop = function() { 

    $('.js-gotop').on('click', function(event){ 

     event.preventDefault(); 

     $('html, body').animate({ 
      scrollTop: $('html').offset().top 
     }, 500); 

     return false; 
    }); 

}; 


// Page Nav 
var clickMenu = function() { 

    $('#navbar a:not([class="external"])').click(function(event){ 
     var section = $(this).data('nav-section'), 
      navbar = $('#navbar'); 

      if ($('[data-section="' + section + '"]').length) { 
       $('html, body').animate({ 
        scrollTop: $('[data-section="' + section + '"]').offset().top 
       }, 500); 
      } 

     if (navbar.is(':visible')) { 
      navbar.removeClass('in'); 
      navbar.attr('aria-expanded', 'false'); 
      $('.js-mi-nav-toggle').removeClass('active'); 
     } 

     event.preventDefault(); 
     return false; 
    }); 


}; 

// Reflect scrolling in navigation 
var navActive = function(section) { 

    var $el = $('#navbar > ul'); 
    $el.find('li').removeClass('active'); 
    $el.each(function(){ 
     $(this).find('a[data-nav-section="'+section+'"]').closest('li').addClass('active'); 
    }); 

}; 

var navigationSection = function() { 

    var $section = $('section[data-section]'); 

    $section.waypoint(function(direction) { 

     if (direction === 'down') { 
      navActive($(this.element).data('section')); 
     } 
    }, { 
     offset: '150px' 
    }); 

    $section.waypoint(function(direction) { 
     if (direction === 'up') { 
      navActive($(this.element).data('section')); 
     } 
    }, { 
     offset: function() { return -$(this.element).height() + 155; } 
    }); 

}; 





// Window Scroll 
var windowScroll = function() { 
    var lastScrollTop = 0; 

    $(window).scroll(function(event){ 

     var header = $('#mi-header'), 
      scrlTop = $(this).scrollTop(); 

     if (scrlTop > 500 && scrlTop <= 2000) { 
      header.addClass('navbar-fixed-top mi-animated slideInDown'); 
     } else if (scrlTop <= 500) { 
      if (header.hasClass('navbar-fixed-top')) { 
       header.addClass('navbar-fixed-top mi-animated slideOutUp'); 
       setTimeout(function(){ 
        header.removeClass('navbar-fixed-top mi-animated slideInDown slideOutUp'); 
       }, 100); 
      } 
     } 

    }); 
}; 



// Animations 
// Home 

var homeAnimate = function() { 
    if ($('#mi-home').length > 0) { 

     $('#mi-home').waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 


       setTimeout(function() { 
        $('#mi-home .to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 


       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 

var introAnimate = function() { 
    var intro = $('#mi-intro'); 
    if (intro.length > 0) { 

     intro.waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 

       var sec = intro.find('.to-animate').length, 
        sec = parseInt((sec * 200) + 400); 

       setTimeout(function() { 
        intro.find('.to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 

       setTimeout(function() { 
        intro.find('.to-animate-2').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('bounceIn animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, sec); 



       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 

var infoAnimate = function() { 
    var info = $('#mi-info'); 
    if (info.length > 0) { 

     info.waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 


       setTimeout(function() { 
        info.find('.to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 



       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 

var discussAnimate = function() { 
    var info = $('#mi-discuss'); 
    if (info.length > 0) { 

     info.waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 


       setTimeout(function() { 
        info.find('.to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 



       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 

var tutorialsAnimate = function() { 
    if ($('#mi-videos').length > 0) { 

     $('#mi-videos').waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 


       setTimeout(function() { 
        $('#mi-videos .to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 


       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 

var examplesAnimate = function() { 
    var info = $('#mi-examples'); 
    if (info.length > 0) { 

     info.waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 


       setTimeout(function() { 
        info.find('.to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 



       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 


var businessAnimate = function() { 
    var business = $('#mi-business'); 
    if (business.length > 0) { 

     business.waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 

       var sec = business.find('.to-animate').length, 
        sec = parseInt((sec * 200) - 400); 

       setTimeout(function() { 
        business.find('.to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 

       setTimeout(function() { 
        business.find('.to-animate-2').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInDown animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, sec); 


       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 

var contactAnimate = function() { 
    var contact = $('#mi-contact'); 
    if (contact.length > 0) { 

     contact.waypoint(function(direction) { 

      if(direction === 'down' && !$(this.element).hasClass('animated')) { 

       setTimeout(function() { 
        contact.find('.to-animate').each(function(k) { 
         var el = $(this); 

         setTimeout (function() { 
          el.addClass('fadeInUp animated'); 
         }, k * 200, 'easeInOutExpo'); 

        }); 
       }, 200); 

       $(this.element).addClass('animated'); 

      } 
     } , { offset: '80%' }); 

    } 
}; 


// Document on load. 
$(function(){ 

    parallax(); 

    burgerMenu(); 

    clickMenu(); 

    windowScroll(); 

    navigationSection(); 

    goToTop(); 


    // Animations 
    homeAnimate(); 
    introAnimate(); 
    infoAnimate(); 
    discussAnimate(); 
    tutorialsAnimate(); 
    examplesAnimate(); 
    businessAnimate(); 
    contactAnimate(); 


}); 


}());

謝謝！

來源

2017-08-08 Colleen Roxas

開始與一個多餘的東西，使一個/一旦出現代碼並從那裏工作？我的滾動讓我看到了你在那裏的所有垂直空白（空白行）。 –

另一種方法是首先：將你的函數分割成更小的函數，直到他們只做一件事而且只做一件事。當你做到這一點，你會很容易地找到redondant的部分，你將能夠重用部分代碼 – Woody

舉個例子，拿你有兩個功能，使它們成爲一個通過傳遞對象即

舊的東西：

var discussAnimate = function() { 
    var info = $('#mi-discuss'); 
    if (info.length > 0) { 
    info.waypoint(function(direction) { 
     if (direction === 'down' && !$(this.element).hasClass('animated')) { 
     setTimeout(function() { 
      info.find('.to-animate').each(function(k) { 
      var el = $(this); 
      setTimeout(function() { 
       el.addClass('fadeInUp animated'); 
      }, k * 200, 'easeInOutExpo'); 
      }); 
     }, 200); 
     $(this.element).addClass('animated'); 
     } 
    }, { 
     offset: '80%' 
    }); 
    } 
}; 

var tutorialsAnimate = function() { 
    if ($('#mi-videos').length > 0) { 
    $('#mi-videos').waypoint(function(direction) { 
     if (direction === 'down' && !$(this.element).hasClass('animated')) { 
     setTimeout(function() { 
      $('#mi-videos .to-animate').each(function(k) { 
      var el = $(this); 
      setTimeout(function() { 
       el.addClass('fadeInUp animated'); 
      }, k * 200, 'easeInOutExpo'); 
      }); 
     }, 200); 
     $(this.element).addClass('animated'); 
     } 
    }, { 
     offset: '80%' 
    }); 
    } 
};

新的東西 - 注意，我並沒有專注於它做什麼，這我會做不同，但更對您的問題：

var thingAnimate = function(mything) { 
    var myT = mything;// just here to make it obvious 
    if (!!myT.length) { 
    myT.waypoint(function(direction) { 
     if (direction === 'down' && !$(this.element).hasClass('animated')) { 
     setTimeout(function() { 
      myT.find('.to-animate').each(function(k) { 
      var el = $(this); 
      setTimeout(function() { 
       el.addClass('fadeInUp animated'); 
      }, k * 200, 'easeInOutExpo'); 
      }); 
     }, 200); 
     $(this.element).addClass('animated'); 
     } 
    }, { 
     offset: '80%' 
    }); 
    } 
}; 
thingAnimate($('#mi-videos')); 
thingAnimate($('#mi-discuss'));

嵌套超時這裏看起來像代碼味道給我，但不是你的問題。

尋找其他東西：在這裏看到你切換一個類的權利？

if ($('#navbar').is(':visible')) { 
    $(this).removeClass('active'); 
} else { 
    $(this).addClass('active'); 
}

好像有人會想到這一點......等你的一部分了一些研究發現：http://api.jquery.com/toggleclass/

這樣：

$(this).toggleClass('active', $('#navbar').is(':visible'));

來源

2017-08-08 17:14:52

簡化動畫的冗餘JS/JQuery函數

回答

相關問題