揭示模块模式变量问题

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 函数一直给我这个错误： Cannot read 属性 'preventDefault' of undefined

编辑：感谢 this page 上的@Bergi，我发现了这个问题。我现在的问题是，将此解决方案与揭示模块模式一起使用的最佳方式是什么？会不会把 defer 属性放在 JS 上:
<script type="text/javascript" src="js/app.js" defer></script> 还是在使用revealing module pattern时有更好的解决方案？

Answer 1

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

揭示模块模式变量问题

Revealing Module Pattern variable problems

javascript

jquery

web

revealing-module-pattern