Код обертки Javascript внутри анонимной функции

Question

Мне нужна помощь в понимании этого шаблона для создания плагина jQuery. Может кто-нибудь объяснить этот простой код для меня?

(function($) { /* Code here */ })(jQuery); 

Я знаю, что это, чтобы избежать конфликтов с различными плагинами, используя тот же $ характер, но как-то не может получить вокруг моей головы, чтобы понять, как это работает. Какое отношение имеет параметр $ к объекту jQuery, который получил разбор?

Answer 1

Давайте разберем это вниз:

(function($) { /* Code here */ })(jQuery); 

Во-первых, конструкция:

(function() {})(); 

создает сразу выполняется функция выражения (часто называемый IIFE). Это функция, которая выполняется немедленно, а не определена сейчас, но называется позже. Это, по сути, анонимная (неназванная) функция, которая определяется и затем выполняется сразу же.

Затем, проходя Jquery к нему так:

(function() {})(jQuery); 

проходит JQuery в качестве первого аргумента, что сразу выполняемой функции. Затем, назвав этот первый аргумент как $, этот символ внутри функции соответствует первому аргументу, который передается.

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

, которая в развернутом виде выглядит следующим образом:

(function($) { 
    // you can use $ here to refer to jQuery 
})(jQuery); 

---

Там пара хорошая вещь об этом для авторов плагинов JQuery:

1. IIFE создает локальную функцию контекст, чтобы вы могли иметь переменные, которые являются «глобальными» для вашего плагина, но на самом деле не являются глобальными переменными и, следовательно, не являются llute или конфликт с фактическим пространством имен глобальных переменных.

2. Вы можете запрограммировать с $ для JQuery, или нет хост-программа на самом деле, определенное для JQuery, потому что вы определили $ локально в пределах вашей функции.

Answer 2

Функция в javascript создает область видимости, это не только переменная $, но и переменные, локальные для функции. И учитывая параметр $, он становится локальным для функции и безопасен в использовании, ссылаясь на jQuery.

Answer 3

То, что вы есть сокращенная что-то вроде этого:

function anonymous_function($) { 
    // Code here 
}; 
anonymous_function(jQuery); 

Как вы можете видеть, это позволяет $ символ, который должен использоваться в качестве ссылки на jQuery объекта внутри функции.

Answer 4

Функция в JavaScript может be either a statement or an expression.При использовании выражения функции, вы можете передать его вокруг, как любое другое значение:

> console.log(function() { 1 + 1; }); 
> (function() {}) && doExpensiveWork(); 
// etc. 

Одна из вещей, которые вы можете сделать с выражением функции немедленно вызвать его. В таких случаях функция называется an immediately invoked function expression (or IIFE for short):

> (function() { console.log("IIFE running"); })(); 
IIFE running 

Это то же самое, как создание функции и вызова его в два этапа:

> var notAnIIFE = function() { console.log("running"); }; 
> notAnIIFE(); 
running 

Выражение функция может, конечно, принимать аргументы:

> var someFunction = function(x, y) { return x + y; }; 
> var seven = someFunction(3, 4); 
> seven 
7 

так IIFE может быть вызвана с аргументами, а также:

> var seven = (function(x, y) { return x + y; })(3, 4); 
> seven 
7 

В случае вызова, как это:

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

значение, связанное с именем jQuery в настоящее время передается в выражение функции в качестве аргумента $. Это похоже на то, выполнив следующие действия:

var initializePlugin = function($) { 
    /* do work with $ */ 
}; 
initializePlugin(jQuery); 

, но она не оставляет никаких следов в родительском пространстве имен (в то время как в нашем втором примере, наше initializePlugin имя осталось позади после того, как мы закончим настройку нашего плагина).

Answer 5

+1 для ответа jfriend00.

Но в том числе jQuery на странице перезаписывает оба глобальных символа jQuery и $ (см. jQuery.js line 9579), что потенциально вызывает конфликты с другими библиотеками, которые определяют глобальный $.

Так что, этот шаг дальше и остановить глобальный конфликт $:

(function($) { 
    // you can use $ here to refer to jQuery 
})(jQuery.noConflict()); 

как показали:

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script> 
(function($) { 
    console.log('want $ to be jQuery here so want true: ' + ($ === jQuery)); 
})(jQuery.noConflict()); 
console.log('do not want $ to be jQuery here so want false: ' + ($ === jQuery)); 
</script>