我想了解jQuery插件语法

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的angular度来理解那里发生的事情，因为它看起来并不像我以前见过的任何语法。 所以这是我的问题清单：

1. 如果你用一个variablesreplace函数（$）…，说“the_function”，语法如下所示：

     (the_function)( jQuery ); 

   什么是“（jQuery）”; 在做什么？ 围绕function的括号真的有必要吗？ 他们为什么在那里？ 有没有另外一个代码可以给你类似的？

2. 它以函数（$）开头。 所以它正在创build一个函数，只要我能告诉将永远不会运行，已经定义了$的参数？ 那里发生了什么？

谢谢您的帮助！

Answer 1

 function(x){ x... } 

只是一个没有名字的函数，需要一个参数“x”，并用x来完成。

而不是“x”，这是一个常用的variables名称，你可以使用$，这是一个不太常见的variables名称，但仍然是合法的。

 function($){ $... } 

我会把它放在括号里，以确保它被parsing为一个expression式：

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

要调用一个函数，你需要在它后面加一个参数列表。 例如，如果我们想调用这个函数传入3来获得$的值，我们可以这样做：

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

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

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

这将创build一个新的函数，它接受一个参数，然后调用该函数，传入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的源代码，你会看到一切都包裹在之间：

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

这也可以看作是一个具有自variables的自variables匿名函数。 一个window （和undefined ）参数被创build，并被映射到window底部的全局window对象。 这是当今stream行的模式，并没有什么速度增益，因为这里的window是从参数而不是被映射到下面映射的全局window对象的参数。

---

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

---

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

JavaScript / jQueryclosures函数语法

你也可以看看这篇文章，了解更多关于我写的自执行函数：

Javascript自执行function

Answer 3

基本的插件语法允许你使用$在你的插件的主体中引用jQuery ，而不pipe$在插件被加载时的身份。 这可以防止命名与其他库的冲突，最显着的原型。

该语法定义了一个函数，它接受一个名为$的参数，所以你可以在函数体中把它作为$来引用，然后立即调用这个函数，把jQuery作为参数。

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

Answer 4

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

例：

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

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

在你的代码中发生了同样的原理， jQuery对象被传递给函数，所以$肯定会引用jQuery对象。

Answer 5

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

 (function(foo){ foo.fn.myPlugin = function() { this.fadeIn('normal', function(){ }); }; })( jQuery ); 

Answer 6

要find这个和其他现代JavaScript技巧和常见做法的清晰解释，我build议阅读Javascript花园。

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

这是特别有用的，因为这些模式中的许多被广泛用于许多图书馆，但没有真正解释。

Answer 7

这里的其他答案很好，但还有一个重要的问题没有得到解决。 你说：

所以它正在创build一个函数，只要我能告诉将永远不会运行，已经定义的$的参数？

不能保证全局variables$可用 。 默认情况下，jQuery在全局范围中创build两个variables： $和jQuery （其中两个是同一对象的别名）。 但是， jQuery也可以在noConflict模式下运行 ：

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

调用jQuery.noConflict() ，全局variables$被设置回jQuery库包含之前的状态。 这允许jQuery与其他也使用$作为全局variables的Javascript库一起使用。

如果你写了一个依赖$作为jQuery别名的插件，那么你的插件将不能用于在noConflict模式下运行的用户。

正如其他人已经解释过的，您发布的代码会创build一个立即被调用的匿名函数。 然后将全局variablesjQuery传递给这个匿名函数，该函数在函数中被安全地replace为局部variables$ 。