javascript - 揭示模块模式变量问题

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 函数中，除非我将“$navBtn”替换为“$('.navBar .btn')”，否则它无法正确运行。我声明变量时做错了什么吗？

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

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

Answer 1

问题是sectionScroll()。它应该是不带括号的 sectionScroll。 使用括号，您可以调用 sectionScroll ，然后传递它的返回值 到上。当您在不带参数的情况下调用它时，sectionScroll 的参数 e 的值为 undefined 并且您收到错误。 试试这个:$('.navBar .btn').on('click',sectionScroll);