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

Ответ 1

Давайте сломаем это:

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

Сначала построим:

(function() {})();

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

Затем, передавая ему jQuery следующим образом:

(function() {})(jQuery);

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

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

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

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

Вот пара хороших вещей об этом для авторов плагина jQuery:

• IIFE создает локальный контекст функции, поэтому вы можете иметь переменные, которые являются "глобальными" для вашего плагина, но на самом деле не являются глобальными переменными и, таким образом, не загрязняют или не конфликтуют с фактическим пространством имен глобальных переменных.

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

Ответ 2

У вас есть сокращение для чего-то вроде этого:

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

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

Ответ 3

Функция в JavaScript может быть выражением или выражением. Когда вы используете выражение функции, вы можете передать его, как любое другое значение:

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

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

> (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 имя осталось после завершения настройки нашего плагина).

Ответ 4

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

Ответ 5

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

Но включение jQuery в страницу перезаписывает оба глобальных символа jQuery и $(см. jQuery.js строка 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>