使用自调用函数和文档就绪之间的区别

时间:2012-11-28 22:28:40

标签: javascript jquery

为什么这在加载标题内容时不起作用...

(function ($) {
    var mheaderwrapper = '<div id="header"></div><div class="header-menu"></div>';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
})(jQuery);

但这确实......

  $.mheader = function() {
    var mheaderwrapper = '<div id="header"></div><div class="header-menu"></div>';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
   }

$(function() {
  $.mheader();
});

3 个答案:

答案 0 :(得分:3)

这:

(function ($) {....})(jQuery);

立即执行,并且只将jQuery映射到$以确保美元符号在自执行函数中确实是“jQuery”。它是“DOM就绪”功能。

此:

$(function() {....});

将在任何代码执行之前等待DOM准备就绪。

您可以在第一个内使用第二个:

(function ($) {
    $(function() {
        //code here
    });
})(jQuery);

做两件事!

答案 1 :(得分:2)

当你在<head>部分中有一个函数时,它会立即执行,并且在HTML元素开始加载之前就这样做了。您的代码执行时,您的元素#wrapper#header以及.header-menu类的任何内容都不存在,这就是失败的原因。

在第二个示例中,使用domready事件会延迟代码触发,直到DOM准备就绪(并且您的HTML元素存在),因此代码可以正常工作。

顺便说一下,

$(function() {
    // executes when DOM is ready
});

只是一个快捷方式:

$(document).ready(function() {
    // executes when DOM is ready
});

以上示例是jQuery提供的特定功能。不要将前者与立即执行的函数结构混淆,后者是纯JavaScript:

(function() {
    // executes NOW
})();

请参阅adeneo's answer了解如何正确组合两者。

答案 2 :(得分:1)

$(document).ready实际上在创建DOM后运行

如果在构造DOM之前插入<head>部分,则自动调用函数会立即运行。