2012-07-20 51 views
2

我在学习jQuery,并试图理解下面的代码结构。了解基本的jQuery结构

if(jQuery) (function($){ 
    $.extend($.fn, { 
     MyPlugin: function(a, b) { 
     ....   
     } 
    }); 
})(jQuery); 

从我可以告诉,这首先检查,看看是否存在jQuery对象。如果是这样,它定义了一个内联函数,它使用'fn'属性扩展了jQuery对象。

我见过这个问题在其他地方问过,for example here,但我不理解的要点没有得到解决。在哪里我感到困惑...

- 为什么传递给初始函数的特殊jquery“$”对象?

- 为什么内联函数传递了jQuery对象(在最后一行)?即:(function($){...})(jQuery);

谢谢。

回答

5

简单的解释

它只是创建了一个封闭在那里你可以参考jQuery$,即使是在noConflict mode

也在jSang的回答(+1)的plugin authoring中解释过。

从技术上讲,它只是定义了一个匿名函数,它接受一个参数叫$并立即调用它传递jQuery作为唯一的参数,所以$作为一个别名jQuery此功能的范围内 - 请注意,$在全球范围内在这个封闭内部是无法访问的。

这意味着,如果你有在全球范围内使用$原型,您将无法访问使用$瓶盖内原型,为本地范围$它引用jQuery的优先。当然,如果在闭包中需要另一个库的方法,您可以使用2个参数来定义它:(function($j, $p) {,并且假定其他库使用$命名空间,则将其称为传递(jQuery, $)。或者更简单地说,将你的闭包的本地范围var别名为与你其他库的全局范围var:(function($j) {不同,这意味着全局$仍然可以在函数的范围内访问。请注意,后一种效果可能是不可取的,因为您不能完全确定您的用户为$分配了什么内容,除非您明确地将其写入文档中。我猜想需要多个库的插件有点偏离主题,所以让我们把它留在那里。


略为详细

noConflict docs页面的实际闭合例子:

jQuery.noConflict(); 
(function($) { 
    $(function() { 
    // more code using $ as alias to jQuery 
    }); 
})(jQuery); 

那封别名jQuery作为$的范围内,如果您的用户非常有用例如,Prototype或其他使用$全局名称空间的库。这使得你的插件更加坚固而且不易出错。

无论jQuery是否控制$变量,都可以使用闭包,因此非常适合插件创作。

试想一下,如果你的最终用户的一个有jQuery的在noConflict模式和原型使用$命名空间,你的插件试图用jQuery方法扩展$?混沌和小马!

当然,您可以跳过关闭并将$全部替换为jQuery,但它会使您的代码更长,更难以被许多开发人员读取。

此外,如果您无法理解闭包,那么How do JavaScript closures work?有很多有用的答案,即使这个问题不需要太多关于闭包的深入知识。 :)

4

我会尽我所能来回答这些问题。我在iPad上,所以如果我忽略了一些技术细节,请耐心等待。这些点有一点简化,但它们有助于描述什么是走向:)

  • $正被传入,因为$可能已被覆盖,意味着别的东西。 jQuery也可以处于noCinflict模式。
  • (jQuery)正在做的是立即调用已定义的内联函数。这被称为自我执行功能。虽然不正确(它不执行,我们这样做),那是什么它被称为。它将jQuery传递给函数,所以我们有一个$的值。正如在另一个答案中提到的,这会创建一个闭包。我建议使用Google搜索“JavaScript关闭”。你会发现一些非常有价值的信息:)

希望帮助:)

+0

哦不错,你解决了自执行方面非常好,我忽略了最初+1 – 2012-07-20 05:08:19

3

你要找的扩展jQuery的新插件“的部分要扩展$ .fn”。并用封闭块包裹。

(function($){ 
//do sth 
})(jQuery); 

上面的代码是你必须考虑的部分。描述它见下面的例子:

1声明函数和调用它

var fn = function(b){ /*do sth like alert(b)*/ }; 
fn('hiiii'); 

2。较短的语法是现在

(function(b){ /*do sth like alert(b)*/ })('hiiii'); 

如果更换b$和传递的参数'hiiii'jQuery的你结束了:

(function($){ /*do sth with $*/ })(jQuery); 

正如你在看第一个示例b是方法参数并且'hiiii'通过了第米在通话时间。 $是方法参数,jQuery是在通话时传递的参数。

原因是为了避免与其他库冲突,因为$在几乎所有的JS库中都被广泛使用。所以你可以在其他库上使用jQuery。

如果你想了解更多有关如何开发插件去this post