简化动画的冗余JS / JQuery函数

Question

我在自定义JS页面中发生了很多相同的功能，并且想知道简单地使用这个代码的最佳方法是什么，而且冗余度更低。 （DRY？）

我仍然是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();


});


}());

谢谢！

Answer 1

例如，取两个函数，通过传递对象将它们合二为一。

老东西：

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'));