javascript - jQuery + 模块模式 : When to declare/query elements?

通常，在 $(document).ready() 之前您不会开始查询 DOM。

在下面的两个选项中，Widget 是在 $(document).ready() 之外声明的(并查询元素)。

可以吗？ 我可以在就绪处理程序之外初始化 jQuery 元素吗(只要我不操作任何东西)？

将整个 Widget 定义放在 $(document).ready() 中会更好吗？

是否应该等到 Widget.init() 查询元素？

注意:我是 JS 设计模式的新手，所以请注意我是否遗漏了什么

选项 1

Widget = {
    ele : $('#ele'),
    init : function(){ ... }
};

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

选项 2

Widget = (function(){
    var privateEle = $('#privateEle');
    return {
        publicEle: $('#publicEle'),
        init: function(){ ... }
    };
}());

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

最佳答案

我会怎么做:

var Widget = (function(){
    var ele;

    function init(_ele){
        ele = _ele;
    };

    return {
        init: init
    };
})();

$(function(){
    Widget.init( $('#foo') );
});

如果您的脚本在 jquery 之前加载，您将不会看到错误“未定义不是函数”。但是，如果您在 domReady 之前执行查询，您可能会得到意想不到的结果，ele = []

编辑:btw .. 将您的 <script> 标签放在 </body> 之前，不在 <head></head> 内

关于javascript - jQuery + 模块模式 : When to declare/query elements?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15667329/