Javascript 什么 (function($) {})(jQuery); 意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2937227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does (function($) {})(jQuery); mean?
提问by Legend
I am just starting out with writing jQuery plugins. I wrote three small plugins but I have been simply copying the line into all my plugins without actually knowing what it means. Can someone tell me a little more about these? Perhaps an explanation will come in handy someday when writing a framework :)
我刚刚开始编写 jQuery 插件。我写了三个小插件，但我只是简单地将这行代码复制到我所有的插件中，实际上并不知道它的含义。有人可以告诉我更多关于这些吗？也许有一天在编写框架时解释会派上用场:)
What does this do? (I know it extends jQuery somehow but is there anything else interesting to know about this)
这有什么作用？（我知道它以某种方式扩展了 jQuery，但还有什么有趣的事情要了解）
(function($) {
})(jQuery);
What is the difference between the following two ways of writing a plugin:
以下两种编写插件的方式有什么区别：
Type 1:
类型 1：
(function($) {
$.fn.jPluginName = {
},
$.fn.jPluginName.defaults = {
}
})(jQuery);
Type 2:
类型 2：
(function($) {
$.jPluginName = {
}
})(jQuery);
Type 3:
类型 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);
I could be way off here and maybe all mean the same thing. I am confused. In some cases, thisdoesn't seem to be working in a plugin that I was writing using Type 1. So far, Type 3 seems the most elegant to me but I'd like to know about the others as well.
我可能离这里很远，也许所有的意思都是一样的。我很迷惑。在某些情况下，这似乎不适用于我使用 Type 1 编写的插件。到目前为止，Type 3 对我来说似乎是最优雅的，但我也想了解其他插件。
采纳答案by RobertPitt
Firstly, a code block that looks like (function(){})()is merely a function that is executed in place. Let's break it down a little.
首先，看起来像的代码块(function(){})()只是一个就地执行的函数。让我们稍微分解一下。
1. (
2. function(){}
3. )
4. ()
Line 2 is a plain function, wrapped in parenthesis to tell the runtime to return the function to the parent scope, once it's returned the function is executed using line 4, maybe reading through these steps will help
第 2 行是一个普通函数，用括号括起来，告诉运行时将函数返回到父作用域，一旦返回，该函数将使用第 4 行执行，也许阅读这些步骤会有所帮助
1. function(){ .. }
2. (1)
3. 2()
You can see that 1 is the declaration, 2 is returning the function and 3 is just executing the function.
你可以看到 1 是声明，2 是返回函数，3 只是执行函数。
An example of how it would be used.
如何使用它的示例。
(function(doc){
doc.location = '/';
})(document);//This is passed into the function above
As for the other questions about the plugins:
至于关于插件的其他问题：
Type 1: This is not a actually a plugin, it's an object passed as a function, as plugins tend to be functions.
类型 1：这实际上不是插件，它是作为函数传递的对象，因为插件往往是函数。
Type 2: This is again not a plugin as it does not extend the $.fnobject. It's just an extenstion of the jQuery core, although the outcome is the same. This is if you want to add traversing functions such as toArray and so on.
类型 2：这又不是插件，因为它不扩展$.fn对象。它只是 jQuery 核心的扩展，尽管结果是一样的。这是如果要添加toArray等遍历函数。
Type 3: This is the best method to add a plugin, the extended prototype of jQuery takes an object holding your plugin name and function and adds it to the plugin library for you.
类型 3：这是添加插件的最佳方法，jQuery 的扩展原型采用一个包含您的插件名称和功能的对象，并将其添加到插件库中。
回答by Vivin Paliath
At the most basic level, something of the form (function(){...})()is a function literal that is executed immediately. What this means is that you have defined a function and you are calling it immediately.
在最基本的层面上，某种形式(function(){...})()是立即执行的函数文字。这意味着您已经定义了一个函数并且您正在立即调用它。
This form is useful for information hiding and encapsulation since anything you define inside that function remains local to that function and inaccessible from the outside world (unless you specifically expose it - usually via a returned object literal).
这种形式对于信息隐藏和封装很有用，因为您在该函数内定义的任何内容都保持在该函数的本地并且无法从外部世界访问（除非您特别公开它 - 通常通过返回的对象文字）。
A variation of this basic form is what you see in jQuery plugins (or in this module pattern in general). Hence:
这种基本形式的一种变体是您在 jQuery 插件（或一般的模块模式）中看到的。因此：
(function($) {
...
})(jQuery);
Which means you're passing in a reference to the actual jQueryobject, but it's known as $within the scope of the function literal.
这意味着您正在传递对实际jQuery对象的引用，但它被称为$在函数文字的范围内。
Type 1 isn't really a plugin. You're simply assigning an object literal to jQuery.fn. Typically you assign a function to jQuery.fnas plugins are usually just functions.
类型 1 并不是真正的插件。您只是将对象文字分配给jQuery.fn. 通常你分配一个函数，jQuery.fn因为插件通常只是函数。
Type 2 is similar to Type 1; you aren't really creating a plugin here. You're simply adding an object literal to jQuery.fn.
类型 2 类似于类型 1；你并没有真正在这里创建插件。您只需将对象文字添加到jQuery.fn.
Type 3 is a plugin, but it's not the best or easiest way to create one.
类型 3 是一个插件，但它不是创建插件的最佳或最简单的方法。
To understand more about this, take a look at this similar questionand answer. Also, this pagegoes into some detail about authoring plugins.
回答by leaf
A little help:
一点帮助：
// 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);回答by Commercial Suicide
Just small addition to explanation
只是解释的小补充
This structure (function() {})();is called IIFE(Immediately Invoked Function Expression), it will be executed immediately, when the interpreter will reach this line. So when you're writing these rows:
这个结构(function() {})();叫做IIFE（立即调用函数表达式），它会立即执行，当解释器到达这一行时。所以当你写这些行时：
(function($) {
// do something
})(jQuery);
this means, that the interpreter will invoke the function immediately, and will pass jQueryas a parameter, which will be used inside the function as $.
这意味着，解释器将立即调用该函数，并将jQuery作为参数传递，该参数将在函数内部用作$.
回答by Krzysztof Przygoda
Actually, this example helped me to understand what does (function($) {})(jQuery);mean?
Consider this:
实际上，这个例子帮助我理解了什么(function($) {})(jQuery);意思？
考虑一下：
// 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
And now:
现在：
jQueryis a variable holding jQuery object.$is a variable name like any other (a, $b, a$betc. and it doesn't have any special meaning like in PHP).
jQuery是一个保存 jQuery 对象的变量。$是一个变量名，就像任何其他 ( a, $b,a$b等等，它没有任何特殊的含义，就像在 PHP 中一样)。
var $f = function ($) { return $*$; };
var jQuery = 2;
console.log($f(jQuery)); // Gives: 4
// An inline version
console.log((function ($) { return $*$; })(jQuery)); // Gives: 4
回答by tbranyen
Type 3, in order to work would have to look like this:
类型 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);
I am unsure why someone would use extend over just directly setting the property in the jQuery prototype, it is doing the same exact thing only in more operations and more clutter.
我不确定为什么有人会直接在 jQuery 原型中设置属性来使用扩展，它只是在更多的操作和更多的混乱中做同样的事情。
