javascript - 如何让一些揭示模块代码仅在 DOM 准备好后运行？

Question

我们使用显示模块模式将内容组织到“命名空间”中。一些初始化代码（用于 jQuery Validation 插件）只能在文档加载后调用。

Namespace.Foo.Bar = (function($) {

  var init = function() {

    $(function() {                // <--- within DOM ready wrapper it never runs
      $.validator.setDefaults({
        // ...
      });
    });

    (function(){                  // <--- but within an IIFE it will run
      $.validator.setDefaults({
        // ...
      });
    })();

  };

  init();

  // public functions/variables
  return {
  };

}(jQuery));

当$.validator.setDefaults位在 DOM 就绪包装器中时，它永远不会被调用，但当它在 IIFE 中时，它会被调用。

为什么？标记某些模块代码以在 DOM 准备好后运行的“最佳”方法是什么？

编辑：使示例代码更能说明问题

Answer 1

init由于您定义函数的方式（即），它不起作用。参见var functionName = function() {} vs function functionName() {}

执行时init()，init函数尚未定义，会报错。

Namespace.Foo.Bar = (function($) {
    // init this module
   console.log(typeof init);   // this prints `undefined`
   init();                     // this throws an error

   // module initialisation
   var init = function() {
     ...
   }
   ...
}(jQuery));

您应该将init()调用移到函数体的末尾，或者使用以下方法定义函数：

function init() { ... }

Answer 2

你应该试试$(document).ready()

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Answer 3

我相信你正在寻找的是这样的：

请注意这两个示例之间的区别：

//working
var myNamespace = (function($) {
    $(function(){
        var init = (function(){
            var text = document.createTextNode("Everything's ready!");
            document.body.appendChild(text);
        })();
    });

}(jQuery));

//Error: Cannot call method 'appendChild' of null 
var myNamespace = (function($) {

        var init = (function(){
            var text = document.createTextNode("Everything's ready!");
            document.body.appendChild(text);
        })();


}(jQuery));

但是，这里发生的事情是init()实际上不能被命名空间中的任何其他东西访问，因为它是在 DOM 加载之后发生的。

尽管如此，这与您遇到的问题很接近，我认为...

我假设您希望模块中的 DOM 就绪包装器用于组织目的。

另请注意，您可以像通常从模块外部一样访问模块：

//appends to the body: "Everything's ready!undefined
var myNamespace = (function($) {
   var private = " Hello world";
        $(function(){
            var hello =(function(){
                var text = document.createTextNode("Everything's ready!" +myNamespace.private);
                document.body.appendChild(text);
            }());
        });

    return{
        public: " Hello World"   
    }

}(jQuery));



 //works as expected 
    var myNamespace = (function($) {    
     var private = " Hello world";
     $(function(){
      var hello =(function(){
       var text = document.createTextNode("Everything's ready!" +myNamespace.public);
       document.body.appendChild(text);
      }());
     });

     return{
      public: " Hello World"   
     }   }(jQuery));