JavaScript Module Pattern document.ready无法正常工作

Question

我有一个Module模式的基本示例，该模式只是向页面的footer元素添加一个类。

1. 将脚本加载到body标签中（在footer元素之后）后，它将起作用并将类添加到页脚中。

2. 将脚本加载到head标记中（在footer元素之前）后，即使在文档准备就绪之前不应该调用init，该脚本也无法工作。

我认为document.ready不能按预期工作，因此找不到脚注元素，因为它不存在。

多年来，这一直困扰着我，我似乎找不到解决方案，请有人可以阐明这个问题吗？

示例： https ： //jsfiddle.net/5x5skoq3/

var App = (function ($) {
    "use strict";

    // private alias to settings
    var s;

    return {
        settings: {
            footer: $("footer")
        },

        init: function() {
            s = this.settings;

            this.footer();
        },

        footer: function(){
            s.footer.addClass("active");
        }
    };
})(jQuery);


jQuery(document).ready(function() {

    App.init();

});

谢谢

Answer 1

init的时间不是问题，而是settings: { footer: $("footer") }的评估为时过早。 加载模块时已经在这里引用了元素，而不是在初始化时引用了该元素。

幸运的是，这很容易解决：

var App = (function($) {
    "use strict";

    var footer;

    return {
        settings: {
            footerSelector: "footer"
        },
        init: function() {
            footer = $(this.settings.footerSelector);
            this.footer();
        },
        footer: function() {
            footer.addClass("active");
        }
    };
})(jQuery);

Answer 2

在这种情况下， App是一个自调用函数。 该函数执行创建返回对象及其所有属性的操作。 在函数自我调用时，将调用footer: $("footer")返回length: 0的jQuery对象，指示选择器未返回匹配的元素或元素集。 我已经更新了您的jsfiddle，以提醒您在调用init找到的匹配项数量。

您可以通过多种方式解决此问题。 我可能会解决的方法是将settings转换为对象构造函数：

 var App = (function ($) { "use strict"; // private alias to settings var s; return { settings: function () { this.footer = $('footer'); }, init: function() { s = new this.settings(); this.footer(); }, footer: function(){ s.footer.addClass("active"); } }; })(jQuery); jQuery(document).ready(function() { App.init(); }); 

 footer.active { background-color: red; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> Header content </header> <footer> Footer content </footer> 

使用此方法，您仍然可以将逻辑置于init函数之外，但可以与settings返回对象的原始示例保持一致。