Question

我正在用我认为的模块模式编写javascript（我对编程还很新，所以如果我使用不正确的术语，请原谅我。）

下面的脚本用于在文档加载时测量三件事：

页面滚动的距离。
相对于文档顶部的#eventSideBar的y偏移
文件的整体高度。

(function (exocet, $, undefined) {

    var scrollDistance = function() {
        return $('body').scrollTop()
    }
    var sideBarOffset = function() {
        return $('#eventSideBar').offset().top;
    }
    var allHeight = function() {
        return $('body').height();
    }

    exocet.init = function() {
        console.log('Scroll distance: ' + scrollDistance() +
                    ' Sidebar offset: ' + sideBarOffset() +
                    ' Total height: ' + allHeight()
        );
    };

}(window.exocet = window.exocet || {}, jQuery));

$(document).ready(function() {
    exocet.init();
});

将这些记录到控制台时，唯一一致正确返回的值（在Chrome中测试）为sideBarOffset。而scrollDistance始终返回0而allHeight变化+/-约1000px。

如果我将exocet.init更改为以下内容：

exocet.init = function() {
    console.log('Scroll distance: ' + scrollDistance() +
                ' Sidebar offset: ' + sideBarOffset() +
                ' Total height: ' + allHeight()
    );
    $(document).scroll(function(){
        console.log('Scroll is now: ' + scrollDistance());
    });
};

然后我总是得到正确的滚动位置值。这得到了正确的结果，但似乎有点hackish。

是否有适当的＆＃34;在没有链接document方法的情况下获取数据的方法，似乎在我的方法中发生了？

Answer 1

听起来你需要的是：

$(document).scroll(function() { exocet.init(); });

把它放在你准备好的回调中。用户滚动时必须记录结果。必须按下刷新没有多大意义。

Answer 2

@ beautifulcoder的示例将在每次文档滚动时起作用。如果您只想在页面加载时滚动位置（即，如果先前在页面上保存了滚动位置），那么您可以将exocet.init()函数放入load事件处理程序中，并使用短暂超时捕获初始滚动位置：

    $(window).on('load', function() {
        setTimeout(function() {
            exocet.init();
        }, 200);
    });

如果你想要两者，那么也要使用scroll事件处理程序。

修改后的JSBin示例。

如何使用模块模式检索文档数据？

2 个答案: