JavaScript/jQuery中的两种格式有什么区别

what is the difference between the two format in javascript/jquery?

本文关键字：格式 什么 区别 两种 jQuery JavaScript      更新时间：2023-09-26

给定这两个片段：

$.ready(function()
{
     ……
}

和

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

似乎我使用第一种格式，但它不起作用，所以我想知道它们之间有什么区别？

另外，将<script src="" />放在页面底部和head有区别吗？

两者之间的区别在于，第一个假设jQuery设置为变量$。 第二个没有。

第二个将沙盒中的$定义为函数的参数，然后将该参数的jQuery传入。 这是使用速记$的常用方法，即使在无冲突模式下也是如此。

(function($){  // <----- $ is defined ONLY within THIS function
  $(function(){
    ……
  });
})(jQuery);    // <------- jQuery being passed in for $

除其他外，区别在于这两个是不同的函数：

  • jQuery.ready 是触发就绪事件的内部方法。它不期望函数作为参数，而是布尔值。

  • $(function) 是 jQuery.fn.ready 的快捷方式，它是绑定就绪事件处理程序的 API 方法，即加载 DOM 时应该运行的函数。

所以，第一个"不起作用"，因为它根本不做你认为它做的事情。我建议阅读.ready文档。

第二个被包装在立即调用的函数表达式中这一事实对功能没有影响。

另外，将<script src="" />放在页面底部和头部之间有什么区别吗？

假设您正在谈论将处理程序绑定到 ready 事件，那么不，在执行方面没有区别。

对于那些不想点击链接的人：

jQuery.ready ：

// Handle when the DOM is ready
ready: function( wait ) {
    // Abort if there are pending holds or we're already ready
    if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
        return;
    }
    // Remember that the DOM is ready
    jQuery.isReady = true;
    // If a normal DOM Ready event fired, decrement, and wait if need be
    if ( wait !== true && --jQuery.readyWait > 0 ) {
        return;
    }
    // If there are functions bound, to execute
    readyList.resolveWith( document, [ jQuery ] );
    // Trigger any bound ready events
    if ( jQuery.fn.trigger ) {
        jQuery( document ).trigger("ready").off("ready");
    }
},

jQuery.fn.ready ：

ready: function( fn ) {  
    // Add the callback
    jQuery.ready.promise().done( fn );
    return this;
},

回答你的最后一个问题：

将javascript放在页面的底部可确保在执行之前加载页面的HTML。据我所知，在页面底部包含一个 javascript 文件，将其加载顺序排在所有其他文件之后。

您提供的片段在执行中应该相同，尽管使用第一个代码段更合适。第二种感觉...冗。

相关文章：