javascript - JavaScript模块和范围

我第一次学习Javascript模块模式，因为随着项目的扩大，我的脚本开始显得凌乱和难以管理。

使用我刚刚构建的以下示例，如何访问已设置的“元素”？在底部函数makeCoverBigger中，我试图通过使用$('.coverCar')来操纵元素el.coverCar，但是我不能这样做。

我没有任何错误，只是不会打球。我也尝试过使用this.el.coverCar。我假设这是el的范围问题，或者我缺少什么？如果我将el.coverCar替换为$('.coverCar')，它将正常工作。

<script>
var CoverCarWidget = (function() {
    var el;
    return {
        elements: {
            coverCar: $('.coverCar'),
            coverCarFilter: $('.coverCarOverlayPattern'),
            coverCarScrollBtn: $('.coverCarScroll')
        },
        init: function() {
            el = this.elements;
            this.makeCoverBigger();
        },
        makeCoverBigger: function() {
            var windowHeight = $(window).height();
            if (el.coverCar.is(':visible')) el.coverCar.height(windowHeight+'px');
            console.log("This fires okay");
        }
    };
})();

$(document).ready(function() {
    CoverCarWidget.init();
});
</script>

问题-现在已解决

在构造CoverCarWidget时，DOM还没有准备好，因此element对象实际上是空的。在DOM ready / init（）处设置这些元素可解决此问题。有关详细信息，请参见接受的答案。

最佳答案

问题是，您的CoverCarWidget.elements变量只是一个普通对象，在创建CoverCarWidget时会对其进行初始化。这意味着coverCar在触发文档准备事件之前被分配。

当使elements为函数时，内部的jQuery选择器将在准备就绪的文档上执行并查找元素。

var CoverCarWidget = (function() {
    var el;
    return {
        getElements: function () {
            return {
                coverCar: $('.coverCar'),
                coverCarFilter: $('.coverCarOverlayPattern'),
                coverCarScrollBtn: $('.coverCarScroll')
            };
        },
        init: function() {
            el = this.getElements();
            this.makeCoverBigger();
        },
        makeCoverBigger: function() {
            var windowHeight = $(window).height();
            if (el.coverCar.is(':visible')) el.coverCar.height(windowHeight+'px');
            console.log("This fires okay");
        }
    };
})();

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

当您的代码在JSFiddle中工作之前，是因为默认情况下，JSFiddle在页面的onLoad事件中执行了整个JavaScript代码。
顺便说一句：您的代码没有产生错误，因为jQuery总是返回一个适当的对象，并且如果没有元素与您的选择器匹配，它会默默地执行任何操作。

关于javascript - JavaScript模块和范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23612646/