Синтаксис функции закрытия JavaScript/jQuery

Кто-нибудь может объяснить различия между следующими функциями:

(function($){
  // can do something like 
  $.fn.function_name = function(x){};

})(jQuery);

Можно ли использовать jQuery в следующей функции?

(function(){

}());

И так же, как и jquery.ready()?

$(function(){

});

Спасибо!

Ответ 1


(function($){
  // can do something like 
  $.fn.function_name = function(x){};

})(jQuery);

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

Вы также можете написать любой символ вместо $:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

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


(function(){

}());

Это самообучающаяся анонимная функция, но без аргументов и запусков/вызовов из-за () в конце.

Эти шаблоны оказываются чрезвычайно полезными в некоторых ситуациях. Например, допустим, что вы хотите запускать кусок кода через 500 миллисекунд каждый раз, вы, естественно, должны идти за setInterval.

setInterval(doStuff, 500);

Но что делать, если функция doStuff занимает более 500 миллисекунд, чтобы делать то, что она делает? Вы увидите неожиданные результаты, но setInterval будет продолжать эту функцию снова и снова в указанное время независимо от завершения doStuff.

Вот где эта модель входит, и вы можете сделать то же самое с setTimeout в сочетании с самоисполняющейся анонимной функцией и избегать bad setInterval следующим образом:

(function foo(){
   doStuff;

   setTimeout(foo, 500);

})()

Этот код также будет повторяться снова и снова с одной разницей. setTimeout никогда не будет запущен, если только doStuff не будет завершено. Гораздо лучший подход, чем использование плохих setInterval.

Здесь вы можете протестировать его.

Обратите внимание, что вы также можете написать самозаверяющую анонимную функцию следующим образом:

function(){
  // some code
}();

Использование дополнительных фигурных скобок вокруг (например, перед function ключевым словом) является просто условным обозначением и может быть замечено в текстах Crackford, jQuery и в других местах.


$(function(){

});

Это короткий синтаксис для готового обработчика:

$(document).ready(function(){

});

Дополнительная информация:

Ответ 2

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

function(){
  // some code
}();

Не будет работать и выдавать SyntaxError, потому что функция анализируется как FunctionDeclaration, а имя функции не является необязательным в этом случае.

С другой стороны, Grouping Operator гарантирует, что контент оценивается как FunctionExpression.

См. Объяснение синтаксиса анонимных функций, инкапсулированных JavaScript