Question

我是网络开发的新手，最近我发现了揭示模块模式。但是我在JS中实现它时遇到了问题。

 var navigation = (function(){
    //chache DOM
    var $navBar = $('.navBar');
    var $navBtn = $('.navBar .btn');
    var $section = $('.section');
    var mobileNav = $('.navBarMobile');

    //bind events
    $('.navBar .btn').on('click', sectionScroll());
    //$navBtn.on('click', sectionScroll()); wouldn't run


    //select section via scroll pos.
    function selectScroll(){
        var windscroll = $(window).scrollTop();
        if (windscroll >= 10) 
        {
            $('.section').each(function(i)
            {            
                if ($(this).offset().top -200 <= (windscroll)) 
                {
                    $navBtn.removeClass('selected');
                    $navBtn.eq(i+6).addClass('selected');
                    $navBtn.eq(-i+5).addClass('selected');
                }
            });
        } 
     }

    //scroll to section via click
    function sectionScroll(e){
        e.preventDefault();

        var target = $(this).find('a').attr('data-scroll');
        var offset = $('[data-anchor=' + target +']').offset().top - 100;
        TweenMax.to($('html, body').stop(), 1, {scrollTop: offset, delay:     .36});  
    }

    return {
        selectScroll: selectScroll
    };

    })();

    var main = function () 
    {
        $(window).scroll(function() { navigation.selectScroll(); }).scroll();
    }; 
    $(document).ready(main);

在我的selectScroll功能中，它无法正常运行，直到我更换了＆＃34; $ navBtn＆＃34;使用＆＃34; $（＆＃39; .navBar .btn＆＃39;）＆＃34;。当我宣布变量时，我做错了吗？

如果我更换 $navBtn.on('click', sectionScroll()); 同 $('.navBar .btn').on('click', sectionScroll()); sectionScroll函数一直给我这个错误：无法读取属性＆＃39; preventDefault＆＃39;未定义的

编辑：感谢this page上的@Bergi，我发现了这个问题。我现在的问题是什么是使用这种解决方案以及揭示模块模式的最佳方法？是否将延迟属性放在JS上：
<script type="text/javascript" src="js/app.js" defer></script> 或者在使用揭示模块模式时是否有更好的解决方案？

Answer 1

问题是sectionScroll()。没有括号，它应该是sectionScroll。使用parens，您正在调用sectionScroll，然后传递它的返回值到on。正如您在没有参数的情况下调用它，e的参数sectionScroll将具有值undefined并且您得到了错误。试试这个：$('.navBar .btn').on('click', sectionScroll);

揭示模块模式变量问题

1 个答案: