Question

jQuery网站列出了jQuery的基本插件语法：

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

我只是想从Javascript的角度理解那里发生了什么，因为它看起来不像我之前看过JS所做的任何语法。所以这是我的问题清单：

如果用函数替换函数（$）...，比如“the_function”，语法如下：
```
 (the_function)( jQuery );
```
什么是“（jQuery）;”在做什么？围绕the_function的括号是否真的有必要？他们为什么在那里？你能提供的另一段代码是否类似？
它以函数（$）开头。所以它创建了一个函数，据我所知，它永远不会被运行，参数为$，已经定义了？那里发生了什么？

感谢您的帮助！

Answer 1

function(x){ 
    x...
}

只是一个没有名字的函数，它接受一个参数“x”，并用x做事。

而不是'x'，这是一个常见的变量名，你可以使用$，这是一个不太常见的变量名，但仍然合法。

function($){ 
    $...
}

我会把它放在括号中，以确保它作为表达式解析：

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

要调用函数，请在其后面添加一个参数列表。例如，如果我们想调用此函数传递3作为$的值，我们会这样做：

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

只是为了踢，让我们调用这个函数并将jQuery作为变量传递：

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

这会创建一个新函数，它接受一个参数，然后调用该函数，传入jQuery作为值。

为什么？

因为每次想要使用jQuery做jQuery时都要编写jQuery是很乏味的。

为什么不写$ = jQuery？

因为其他人可能已将$定义为其他内容。这可以保证$的任何其他含义都被这个暗示。

Answer 2

(function( $ ){

})( jQuery );

这是在参数中使用$的自执行匿名函数，以便您可以在该函数内使用它（$）而不是jQuery，而不必担心与其他函数冲突因为在其他库中，$具有特殊含义。在编写jQuery插件时，该模式特别有用。

您可以在那里写任何字符而不是$：

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

此处j将自动捕获末尾(jQuery)指定的jQuery。或者您可以完全忽略参数，但是您必须使用jQuery关键字而不是$，而不必担心碰撞。所以$包含在简短的参数中，这样你就可以在函数内部写$而不是jQuery。

如果您查看jQuery的源代码，您将看到所有内容都包含在其中：

(function( window, undefined ) {
  // jQuery code
})(window);

这也是可以看到带参数的自执行匿名函数。创建window（和undefined）参数，并与底部window的全局(window)对象进行映射。这是目前流行的模式，速度很快，因为window将从参数而不是全局window对象中进行查看。

$.fn是jQuery的对象，您可以在其中创建新函数（也是对象）或插件本身，以便jQuery将您的插件包装在其$.fn对象中并使其可用。

有趣的是，我在这里回答了类似的问题：

JavaScript / jQuery closure function syntax

您还可以查看本文以了解有关我编写的自执行函数的更多信息：

Javascript Self-executing Functions

Answer 3

基本的插件语法允许您使用$来引用插件正文中的jQuery，无论插件加载时$的标识是什么。这可以防止与其他库的命名冲突，最明显的是Prototype。

语法定义了一个接受称为$的参数的函数，因此您可以在函数体中将其称为$，然后立即调用该函数，将jQuery置于其中作为论点。

这也有助于不污染全局命名空间（因此在插件体中声明var myvar = 123;不会突然定义window.myvar），但主要的表面目的是允许您使用$其中$可能已被重新定义。

Answer 4

你正在那里处理一个自我调用的匿名函数。将jQuery插件包装在这样的函数中就像是“最佳实践”，以确保$符号绑定到jQuery对象。

示例：

(function(foo) {
    alert(foo);
}('BAR'));

当放入BAR块时，这会提醒<script>。参数BAR被传递给调用自身的函数。

在您的代码中发生了相同的原则，jQuery对象被传递给函数，因此$将引用jQuery对象。

Answer 5

最后的jQuery将自身（jQuery）传递给函数，以便您可以在插件中使用$符号。你也可以这样做

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );

Answer 6

为了找到这个以及其他现代javascript技巧和常见做法的明确解释，我建议阅读Javascript Garden。

http://bonsaiden.github.com/JavaScript-Garden/

它特别有用，因为许多这些模式在许多库中被广泛使用，但没有真正解释过。

Answer 7

这里的其他答案都很棒，但有一点尚未解决。你说：

所以它创建了一个函数，据我所知，它永远不会被运行，参数为$，已经定义了？

无法保证全局变量$可用。默认情况下，jQuery在全局范围内创建两个变量：$和jQuery（其中两个是同一对象的别名）。但是， jQuery can also be run in noConflict mode ：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

当您调用jQuery.noConflict()时，全局变量$将被设置回包含jQuery库之前的任何内容。这允许jQuery与其他Javascript库一起使用，这些库也使用$作为全局变量。

如果你编写的插件依赖于$作为jQuery的别名，那么你的插件对于在noConflict模式下运行的用户不起作用。

正如其他人已经解释的那样，您发布的代码会创建一个立即调用的匿名函数。然后将全局变量jQuery传递给此匿名函数，该函数在函数中安全地别名为 local 变量$。

我想了解jQuery插件语法

7 个答案: