优化Javascript代码

时间:2016-10-09 23:25:44

标签: javascript optimization

我想以任何方式优化&压缩那个js代码

$("document").ready(function($) {
        var num = $('#menu').offset().top;
        var num2 = $('#HTML2').offset().top;
        var nav = $('#menu');
        var nav2 = $('#HTML2');
        $(window).scroll(function() {
            if ($(this).scrollTop() > num) {
                nav.addClass("menu-scroll");
            } else {
                nav.removeClass("menu-scroll");
            }
            if ($(this).scrollTop() > num2) {
                nav2.addClass("html2fixs");
            } else {
                nav2.removeClass("html2fixs");
            }
        });
    $('#BackToTop').click(function(){
        $('html, body').animate({scrollTop : 0},300);
        return false;
    });
});

请提供有关如何加速我网站中所有JavaScript代码的任何提示?

1 个答案:

答案 0 :(得分:0)

您可以使用名为toggleScript的JQuery函数,这将使您的代码更短。另外,最好不要只调用num1num2所有变量,以使代码更具可读性。将元素保存到变量中时 - 您不必再次调用${},而是使用变量。



$("document").ready(function() {
    var menu = $('#menu'); //nav
    var html2 = $('#HTML2'); //nav2

    var menuOffsetTop = menu.offset().top; //num
    var html2OffsetTop = html2.offset().top; //num2


    $(window).scroll(function() {
        var w = $(this);

        menu.toggleClass('menu-scroll' , (w.scrollTop() > menuOffsetTop) );
        /* 
        The same as
        if (w.scrollTop() > menuOffsetTop) {
            menu.addClass('menu-scroll') ;  
        } else {
            menu.removeClass('menu-scroll');
        }
        */
        html2.toggleClass('html2fixs' , (w.scrollTop() > html2OffsetTop) );
    });

    $('#BackToTop').click(function(){
        $('html, body').animate({scrollTop : 0},300);
    });
});