在ajax加载后重新初始化javascript模块的最佳方法

时间:2017-02-03 16:49:38

标签: javascript ajax

我有一堆JS函数/模块定义如下:

m.revealer = function(){
    var els = doc.getElementsByClassName('js-reveal');

    if (els.length < 1) return false;

    var wh = win.innerHeight;

    function checkEls(){
        for (var i = 0; i < els.length; i++) {
            var el = els[i],
                top = el.getBoundingClientRect().top,
                offset = parseFloat(el.getAttribute('data-offset')),
                target;

            offset = offset ? offset : 1;
            target = (wh * offset);

            if (top <= target && !u.hasClass(el, 'revealed')) {
                u.addClass(el, 'revealed');
            }

            if (top > target && u.hasClass(el, 'revealed')) {
                u.removeClass(el, 'revealed');
            }
        };

        requestAnimationFrame(checkEls);
    }

    checkEls();
};

通过以下方式调用它们:

m.installSetUp();
m.pinner();
m.installMonitor();
m.revealer();

在这些内容中,有各种各样的东西,例如事件监听器等。其中一些东西被绑定到窗口或文档。除了窗口或文档事件监听器之外,它们将变量保存在自己的范围内。

当我使用ajax加载页面时,在页面加载并且有新的dom之后我会回想起那些让它们起作用的函数:

function reinit() {
            doc = document;
            body = doc.body;
            m.navControls();
            m.introVideo();
            m.homeSnaps();
            m.techSwitch();
            m.minicartToggle();
            m.installationAnims();
}

然而,我似乎遇到了很多错误,其中的事情都没有正常工作。依赖于滚动的事情是关闭的,听众被分配两次等等。

我如何才能最好地确定/确保将来不会发生这种情况?

请注意:不使用jQuery。

如果需要更多代码,我会在需要的地方提供。

感谢。

0 个答案:

没有答案