【问题标题】:jQuery dollar sign ($) as function argument?jQuery美元符号($)作为函数参数?
【发布时间】:2011-06-26 08:54:33
【问题描述】:

我了解 JavaScript 闭包,并且我已经在原生 JS 中看到过这种情况:

(function () {
  // all JS code here
})();

但是,添加 jQuery 香料有什么用呢?

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

【问题讨论】:

  • 在这种情况下 $ 可以是任何它将成为此函数内的 jquery 对象 $function(y){})(jQuery);

标签: jquery closures dollar-sign


【解决方案1】:

当你看到:

(function() {
  // all JS code here
})();

它被称为自调用匿名函数。该函数在解析后立即执行,因为在末尾添加了()(这就是您运行js函数的方式)。

注意,额外的大括号只是惯例,你也可以这样写:

function() {
  // all JS code here
}();

但是这个约定在各地都被大量使用,你应该坚持下去。

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

这里,$ 映射到 jQuery 对象,以便您可以使用 $ 代替 jQuery 关键字。你也可以在那里放一些其他角色:

(function(j) {
  // all JS code here
})(jQuery);

这里,j 被映射到 jQuery 对象。

另请注意,为自调用函数指定的参数保留在该函数的范围内,并且不会与外部范围/变量冲突。


我已经写了一篇关于这个主题的文章,请查看:

【讨论】:

  • 但是,$ 默认不是jQuery 的别名吗?
  • @MattDiPasquale:这就是我在回答中所说的,它是(function($) { // all JS code here })(jQuery); 的别名......
  • Firebug 控制台不会以这种方式提供详细的错误消息。我只是得到“没有定义恋人”。
  • (function(){ alert("o"); })() 可以,但 function(){ alert("o"); }() 不在 Chrome/Firefox 的控制台中,所以我认为这不是应该坚持的约定(如您的回答中所述),这是必须的吗?跨度>
【解决方案2】:

这是一种将 jQuery 映射到 $ 的方式,这样页面中的所有代码都不会看到它。

也许您有一个使用 jQuery 的现有脚本,您希望重用它,但您也使用在同一页面中也使用 $ 的原型。

通过使用该构造中的代码包装任何 jQuery,您可以为包含的部分将 $ 重新定义为 jQuery,而不会与页面中的其他代码发生冲突。

【讨论】:

  • 请注意,您可以通过这种方式映射任何参数,而不仅仅是 jQuery$,这对于防止在 IIFE 函数范围之外提升变量非常有用。
【解决方案3】:

以这种方式将 jQuery 传递给闭包有两个原因。

到目前为止,最重要的一点是它使您的代码可以在使用 jQuery's "no conflict" mode 的页面上运行,这允许将 jQuery 与其他想要控制 $ 全局的库一起使用。因此,在编写 jQuery 插件时,强烈推荐使用(function($) { ... })(jQuery) 技术。

第二个原因是它使$成为自执行函数范围内的局部变量,并且局部变量访问(略微)比全局变量访问快。就个人而言,我不认为这是一个非常令人信服的理由——我无法想象使用 jQuery 而不是 DOM 方法的开销是可以接受的,但是作为全局变量访问 jQuery 的开销是不能接受的。 :-)

我想说,当编写插件时使用这种技术的最佳理由是为了保持一致性——当它时你不太可能忘记这样做> 如果您有这样做的习惯,这很重要。而且,你永远不知道什么时候有机会回收代码!

【讨论】:

    【解决方案4】:
    (function() {
       // all JS code here
    })();
    

    是一个立即调用函数表达式 (IIFE),发音为“iffy”。有些人也称它们为“匿名、自执行函数”,或简称为“自执行函数”。

    (function(aParameter) {
       alert(aParameter);  // will alert "an argument"
    })("an argument");
    

    这是一个 IIFE,它接受参数“aParameter”并将参数“一个参数”传递给自己。

    (function($){
       alert($(window).jquery);  // alert the version of jQuery
    })(jQuery);
    

    这个类似,但是“jQuery”(jQuery 对象实例)是 IIFE 的参数,在这种情况下,jQuery 作为 '$' 参数传递。这样,只需键入“$”,IIFE 的主体就可以访问 jQuery 及其成员。这是一个常见的 jQuery 约定,编写 jQuery 插件的人通常以这种方式维护这个约定。

    上述代码不仅维护了 jQuery 约定,还确保了您和其他任何人都不会意外破坏该约定。例如,采用以下代码:

    var $ = function() {
       alert('foo');
    }
    

    这段代码把'$'变成了绝对不是jQuery的东西。如果有人在您的插件代码之外的其他代码中执行此操作,然后您没有明确地将 jQuery 作为 '$' 传递给您的插件,那么您将无法像往常一样使用 '$' 作为 jQuery。

    【讨论】:

    • IIFE 是更常见的自执行函数的白话。
    猜你喜欢
    • 2021-12-25
    • 2010-12-14
    • 1970-01-01
    • 2016-03-04
    • 1970-01-01
    • 2016-04-05
    • 1970-01-01
    • 2022-06-20
    • 2011-09-07
    相关资源
    最近更新 更多