【问题标题】:What "jQuery(function($) {" is for?“jQuery(function($) {”是干什么用的?
【发布时间】:2018-02-07 18:23:10
【问题描述】:

我对网络编程很陌生。

寻找一个jQuery函数我发现了类似的东西:

jQuery(function($) {
    $('#EleId1').click(function () {
        //do stuff
    }
    $('#EleId2').click(function () {
        //do other stuff
    }

}); 

但是如果我删除“jQuery(function($) {”和最后的“});”,一切仍然有效,我在控制台中没有错误。

所以我关于“jQuery(function($) {”的问题是:
是推荐的(作为最佳实践或更易读的代码)还是出于其他原因需要它?

编辑 在类似的问题中,缺少“jQuery”,因此它似乎与那些不知道“$”等同于“jQuery”的问题不同,如下面的评论中所述。

【问题讨论】:

  • @luxdvie 抱歉,我没有找到那个问题。无论如何,其他问题语法中缺少“jQuery”
  • @luxdvie 不完全是。这是一个不完整的 sn-p,因为它最后缺少 IIFE (jQuery) 注入。参数$未定义
  • @SterlingArcher 这相当于jQuery(document).ready(function($) { ... });
  • 如果您要问jQuery(function($) 中的$ 是什么,它也是jQuery。 jQuery 在函数中传递自身。 $ 通常是一个全局的,但是通过传入它,它变成了一个局部的,这也允许你忽略冲突,因为在你的函数内部 $ 变成了 jQuery 而不是其他库。由于您没有其他库,因此您也可以在函数外部使用$(因为它是全局的)。

标签: jquery syntax


【解决方案1】:

代码:

jQuery(function() {

的简写
$( document ).ready(function() {

在文档“准备就绪”之前,无法安全地操作页面。 jQuery 会为您检测到这种准备状态。包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。

https://learn.jquery.com/using-jquery-core/document-ready/

jQuery vs $ : "jQuery" = "$" - jQuery(function()$(function() 相同 - 因为其他库使用 "$" 你可以显式使用 jQuery 所以你不会得到冲突.

默认情况下,jQuery 使用 $ 作为 jQuery 的快捷方式。因此,如果您正在使用另一个使用 $ 变量的 JavaScript 库,您可能会遇到与 jQuery 的冲突。

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

因此您可以使用jQuery(function 而不是$(function,以防 $ 在其他地方定义。


所以对于问题中的代码,和其他问题略有不同,函数调用有一个参数是自己传jQuery的,所以问题中的代码:

jQuery(function($) {

确保函数内部的所有代码都可以访问$,而函数外部的代码可能会将$定义到不同的库中,也可能没有。

这可以通过使用不同的变量代替上面的 $ 来证明:

jQuery(function(replacementJquery) {
  replacementJquery("#id").text("updated")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='id'>original</div>

如果您不使用另一个使用 $ 的库,那么您可以安全地使用:

$(function() {

如果您正在编写的库可以与 jQuery 之外的其他库一起使用,请使用:

jQuery(function($) {

并在函数内部安全地使用$

【讨论】:

    猜你喜欢
    • 2019-12-16
    • 2011-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-20
    • 1970-01-01
    • 2011-09-21
    • 1970-01-01
    相关资源
    最近更新 更多