já está abreviado para $ (document).

245

É o seguinte atalho para $(document).ready?

(function($){

//some code

})(jQuery);

Vejo esse padrão usado muito, mas não consigo encontrar nenhuma referência a ele. Se for uma abreviação $(document).ready(), existe algum motivo específico para não funcionar? Nos meus testes, parece sempre disparar antes do evento ready.

Mark Brown
fonte
Qualquer variável definida dentro da função mencionado padrão (por exemplo var somevar;) não irá alterar o conteúdo de variáveis do mesmo nome fora da função
Timo Huovinen
3
O código tem o efeito de garantir que $ represente jQuery dentro desse bloco de funções, de modo que o código seja portável para locais onde o alias $ para jQuery esteja desativado ou definido como outra coisa.
AsksAnyway

Respostas:

252

A abreviação de $(document).ready(handler)é $(handler)(onde handlerestá uma função). Veja aqui .

O código na sua pergunta não tem nada a ver .ready(). Em vez disso, é uma expressão de função chamada imediatamente (IIFE) com o objeto jQuery como argumento. Seu objetivo é restringir o escopo de pelo menos a $variável ao seu próprio bloco, para que não cause conflitos. Você normalmente vê o padrão usado pelos plugins do jQuery para garantir isso $ == jQuery.

BoltClock
fonte
14
Tecnicamente , é uma expressão de função imediatamente invocada . Se auto-invocasse, estaria se chamando de dentro de si. Pesquise na Web iifeou pule para a famosa postagem no blog de Cowboy Alman . Detalhes ... sheesh.
2540625
546

A abreviação é:

$(function() {
    // Code here
});
Kyle Trauberman
fonte
24
O primeiro argumento é $. Pode querer adicionar isso. É útil parajQuery(function($, undefined) {});
Raynos 14/05
5
@raynos Não é necessário. o código acima fina funciona como um alias para$(document).ready(function(){ });
Kyle Trauberman
10
É útil saber que você recebe $de graça como o primeiro argumento.
Raynos 14/05
3
Ainda visito essa resposta uma vez por mês ou mais.
Nugsson 30/11
89

A abreviação correta é esta:

$(function() {
    // this behaves as if within document.ready
});

O código que você postou ...

(function($){

//some code

})(jQuery);

… Cria uma função anônima e a executa imediatamente, jQuerysendo passada como arg $. Tudo o que ele efetivamente faz é pegar o código dentro da função e executá-lo normalmente, pois $já é um apelido para jQuery. : D

Gordon Gustafson
fonte
4
Você poderia dizer que também garante que $ seja o alias do jQuery, se outras ferramentas que também usam $ como um alias forem carregadas
Jim Wolff
16

Isso não é uma abreviação para $(document).ready().

O código que você postou coloca o código interno e torna o jQuery disponível $sem poluir o espaço para nome global. Isso pode ser usado quando você deseja usar o protótipo e o jQuery em uma página.

Documentado aqui: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immedediat-invoked-function-expression

samy-delux
fonte
Obrigado por responder à pergunta
MarcGuay
12

Estas linhas específicas são o invólucro usual para plugins jQuery:

"... para garantir que seu plug-in não colide com outras bibliotecas que possam usar o cifrão, é uma boa prática passar o jQuery para uma função de execução automática (fechamento) que mapeia o cifrão para que ele possa ' ser substituído por outra biblioteca no escopo de sua execução ".

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

Em http://docs.jquery.com/Plugins/Authoring

morgar
fonte
11

A abreviação de segurança de várias estruturas para pronto é:

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

Isso ocorre porque jQuery não é o único quadro que utiliza o $e undefinedvariáveis

Timo Huovinen
fonte
também pode ser escrito como(function($){ ... })(jQuery);
Mike Causador
2
@MikeCauser também é uma boa abordagem, mas não será chamada ready, mas sim imediatamente
Timo Huovinen
5

Variante ainda mais curta é usar

$(()=>{

});

onde $significa jQuery e ()=>{}é chamada de 'função de seta' que herda thisdo fechamento. (Para que thisvocê provavelmente terá em windowvez de document.)

Edvard Rejthar
fonte
0

Que tal isso?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);
RN Kushwaha
fonte