What does (function($) {})(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编写的插件中工作。到目前为止，第三种对我来说似乎是最优雅的，但我也想知道其他的。

260286 次浏览
小开
最佳答案

首先，看起来像(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的扩展原型获取一个包含插件名称和函数的对象，并将其添加到插件库中。

小开

类型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(){...})()这种形式的东西是一个立即执行的函数字面量。这意味着您已经定义了一个函数，并且立即调用它。

这种形式对于信息隐藏和封装非常有用，因为在函数内部定义的任何内容都是函数的局部内容，外部世界无法访问(除非您特别公开它——通常通过返回的对象文字)。

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

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

这意味着您传递了一个对实际jQuery对象的引用，但在函数字面量的范围内，它被称为$。

Type 1并不是真正的插件。你只是将一个对象字面量赋值给jQuery.fn。通常你将一个函数赋值给jQuery.fn，因为插件通常只是函数。

2型与1型相似;你并没有真正创建一个插件。你只是在jQuery.fn中添加了一个对象字面值。

Type 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);

小开

只是解释的一个小补充

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

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

这意味着解释器将立即调用函数，并将jQuery作为参数传递，该参数将在函数内部作为$使用。

小开
实际上，这个例子帮助我理解了(function($) {})(jQuery);的意思 想想看:< / p > 
// Clousure declaration (aka anonymous function)
var f = function(x) { return x*x; };
// And use of it
console.log( f(2) ); // Gives: 4


// An inline version (immediately invoked)
console.log( (function(x) { return x*x; })(2) ); // Gives: 4

现在考虑这个:

  • jQuery是一个包含jQuery对象的变量。
  • $是变量 a， $b， a$b等)，但它没有任何名称 在PHP中，

知道我们可以再看一下我们的例子:

var $f = function($) { return $*$; };
var jQuery = 2;
console.log( $f(jQuery) ); // Gives: 4


// An inline version (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4

提交答案