jQuery cifrão ($) como argumento de function?

Eu entendo o fechamento de JavaScript, e eu vi isso feito no JS nativo:

(function () { // all JS code here })(); 

Mas, o que adicionar o tempero jQuery faz?

 (function ($) { // all JS code here })(jQuery); 

É uma forma de mapear o jQuery para o $ de maneira que nem todo código em uma página o veja.

Talvez você tenha um script existente que usa jQuery que você gostaria de reutilizar, mas você também usa o protótipo que também usa $ na mesma página.

Ao agrupar qualquer jQuery usando código nessa construção, você redefine $ para jQuery para a parte contida sem entrar em conflito com outro código na página.

Quando você vê:

 (function() { // all JS code here })(); 

É conhecido como function anônima auto-invocadora . A function é executada assim que é analisada devido à adição de () no final (é assim que você executa as funções js).

Observe que chaves externas extras são apenas convenções, você também pode escrever como:

 function() { // all JS code here }(); 

Mas essa convenção é muito usada por todos os lados e você deve se ater a ela.

 (function($) { // all JS code here })(jQuery); 

Aqui, $ é mapeado para o object jQuery para que você possa usar $ vez da palavra-chave jQuery . Você também pode colocar outro personagem lá também:

 (function(j) { // all JS code here })(jQuery); 

Aqui, j é mapeado para o object jQuery .

Observe também que os argumentos especificados para a function de auto-invocação permanecem dentro do escopo dessa function e não entram em conflito com o escopo / variables ​​externas.


Eu escrevi um artigo sobre o assunto, confira:

  • Funções auto-executáveis ​​de JavaScript
 (function() { // all JS code here })(); 

É uma Expressão de Função Imediatamente Invocada ( IIFE ), pronunciada “duvidosa”. Algumas pessoas também os chamam de “funções anônimas, auto-executáveis”, ou apenas “funções auto-executáveis”.

 (function(aParameter) { alert(aParameter); // will alert "an argument" })("an argument"); 

Aqui está um IIFE que pega o parâmetro ‘aParameter’ e passa o próprio argumento “um argumento”.

 (function($){ alert($(window).jquery); // alert the version of jQuery })(jQuery); 

Este é similar, mas “jQuery” (a instância do object jQuery) é o argumento para o IIFE e, neste caso, o jQuery é passado como o parâmetro ‘$’. Dessa forma, simplesmente digitando ‘$’, o corpo do IIFE tem access ao jQuery e seus membros. Essa é uma convenção comum do jQuery, e é comum que pessoas que escrevem plugins do jQuery mantenham essa convenção dessa maneira.

O código acima não apenas mantém a convenção do jQuery, mas também garante que nem você nem ninguém pode quebrar acidentalmente essa convenção. Por exemplo, pegue o seguinte código:

 var $ = function() { alert('foo'); } 

Esse código transforma ‘$’ em algo que definitivamente não é jQuery. Se alguém fez isso em algum outro código fora do código do seu plugin, e você não passou explicitamente o jQuery como ‘$’ para o seu plugin, então você não seria capaz de usar ‘$’ como jQuery como você faz normalmente.

Há duas razões para passar o jQuery para um encerramento dessa maneira.

De longe, o mais significativo é que ele faz o seu código funcionar em páginas que usam o modo “sem conflito” do jQuery, que permite o uso do jQuery juntamente com outras bibliotecas que desejam controlar o $ global. Por esse motivo, a técnica (function($) { ... })(jQuery) é altamente recomendada ao gravar plug-ins do jQuery.

O motivo secundário é que ele cria uma variável local no escopo da function auto-executável e o access à variável local é (marginalmente) mais rápido do que o access à variável global. Pessoalmente, não considero isso uma razão muito convincente – não consigo imaginar um cenário em que a sobrecarga de usar o jQuery em vez de methods DOM seja aceitável, mas a de acessar o jQuery como uma variável global não seria. 🙂

Eu diria que a melhor razão para usar esta técnica quando não está escrevendo um plugin é para consistência – você é menos provável que se esqueça de fazê-lo quando é importante se você tem o hábito de fazê-lo quando não é . Além disso, você nunca sabe quando terá a oportunidade de reciclar o código!

Intereting Posts