什么(功能($){})(jQuery); 意思?

我刚刚开始编写jQuery插件。 我写了三个小插件,但是我只是简单地将这一行复制到我的所有插件中,却没有真正知道它是什么意思。 有人能告诉我更多关于这些吗? 也许有一天,写一个框架时,一个解释会派上用场:)

这是做什么的? (我知道它以某种方式扩展了jQuery,但还有什么有趣的知道这个)

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

以下两种编写插件的方式有什么区别:

类型1:

 (function($) { $.fn.jPluginName = { }, $.fn.jPluginName.defaults = { } })(jQuery); 

类型2:

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

类型3:

 (function($){ //Attach this new method to jQuery $.fn.extend({ var defaults = { } var options = $.extend(defaults, options); //This is where you write your plugin's name pluginname: function() { //Iterate over the current set of matched elements return this.each(function() { //code to be inserted here }); } }); })(jQuery); 

我可以在这里,也许所有的意思是同样的事情。 我很困惑。 在某些情况下, 似乎并没有在使用Type 1编写的插件中工作。到目前为止,Type 3对我来说似乎是最优雅的,但我也想知道其他的。

首先,看起来像(function(){})()的代码块仅仅是一个就地执行的函数。 让我们稍微分解一下。

 1. ( 2. function(){} 3. ) 4. () 

第2行是一个简单的函数,用括号包起来,告诉运行时将函数返回给父作用域,一旦返回函数使用第4行执行,也许读取这些步骤将有助于

 1. function(){ .. } 2. (1) 3. 2() 

你可以看到1是声明,2是返回函数,3是刚才执行的函数。

它将如何使用的一个例子。

 (function(doc){ doc.location = '/'; })(document);//This is passed into the function above 

至于关于插件的其他问题:

类型1:这实际上不是一个插件,它是一个作为函数传递的对象,因为插件往往是函数。

类型2:这又不是一个插件,因为它不扩展$.fn对象。 这只是jQuery核心的扩展,尽管结果是一样的。 这是如果你想添加遍历函数,如toArray等。

类型3:这是添加插件的最佳方法,jQuery的扩展原型需要一个持有插件名称和函数的对象,并将其添加到插件库中。

在最基本的层面上,形式(function(){...})()是一个立即执行的函数。 这意味着你已经定义了一个函数,并且你正在立即调用它。

这个表单对信息隐藏和封装很有用,因为你在这个函数中定义的任何内容都是该函数的本地对象,并且从外部世界是不可访问的(除非你特别暴露它 – 通常是通过返回的对象字面值)。

这个基本形式的变体是你在jQuery插件中看到的(或者一般的这个模块模式)。 因此:

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

这意味着你传递了一个对实际jQuery对象的引用,但是它在函数文本的范围内被称为$

类型1不是一个真正的插件。 您只需将对象文字分配给jQuery.fn 。 通常你给jQuery.fn分配一个函数,因为插件通常只是函数。

类型2与类型1类似; 你不是真的在这里创建一个插件。 您只需将对象文字添加到jQuery.fn

类型3是一个插件,但它不是创建一个最好或最简单的方法。

要了解更多关于这个,看看这个类似的问题和答案 。 另外, 这个页面还介绍了关于创作插件的一些细节。

一点帮助:

 // an anonymous function (function () { console.log('allo') }); // a self invoked anonymous function (function () { console.log('allo') })(); // a self invoked anonymous function with a parameter called "$" var jQuery = 'I\'m not jQuery.'; (function ($) { console.log($) })(jQuery); 

类型3,为了工作将不得不看起来像这样:

 (function($){ //Attach this new method to jQuery $.fn.extend({ //This is where you write your plugin's name 'pluginname': function(_options) { // Put defaults inline, no need for another variable... var options = $.extend({ 'defaults': "go here..." }, _options); //Iterate over the current set of matched elements return this.each(function() { //code to be inserted here }); } }); })(jQuery); 

我不确定为什么有人会使用扩展,直接在jQuery原型中设置属性,它只是在更多的操作和更多的混乱做同样的事情。

只是除了解释

这个结构(function() {})(); 被称为IIFE (立即调用函数表达式),当解释器到达这一行时,立即执行它。 所以当你写这行时:

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

这意味着,解释器将立即调用这个函数,并且将传递jQuery作为参数,这个参数将在函数内部被用作$