Conforme amadureci minhas habilidades em AJAX nos últimos anos, estabeleci alguns padrões padrão que parecem ser as melhores práticas de muitos. Uma que eu estava meio atrasada em adotar foram as funções anônimas autoexecutáveis. Eu os tinha visto usados, especialmente desde que se você olhar para qualquer biblioteca JavaScript popular como o código-fonte do jQuery. Muitas vezes me perguntei o que eles eram na época, mas descobri seu valor. Eles não apenas ajudam você a organizar seu código, mas também podem ser uma técnica de codificação defensiva útil. Uma coisa que descobri que eles oferecem é uma maneira mais agradável de encapsular módulos JavaScript.
Como eu disse, já vi o uso de funções anônimas muitas vezes, mas não cliquei no motivo pelo qual eu deveria usá-las até assistir As 10 coisas que Paul Irish aprendeu com o código-fonte do jQuery e seu acompanhamento de mais 11 coisas . Ambos os vídeos devem ser assistidos por qualquer desenvolvedor da web. Nesses vídeos, ele explica como funções anônimas são usadas em jQuery para inicializar variáveis e também para garantir que undefined seja exatamente isso, undefined.
Então, como é um invólucro anônimo?
(função
() {
...
} ());
O que está acontecendo com a sintaxe acima? O primeiro é o conjunto externo (). Isso é feito mais pela organização do que qualquer outra coisa. Qualquer coisa dentro do parêntese é bem encapsulada. Dentro de () está uma função anônima. É anônimo porque não há nenhum nome atribuído a ele. A função pode ter parâmetros passados, como veremos a seguir, como qualquer outra função. Dentro da função está o código real que você deseja executar. Após a definição da função, há outro conjunto de parênteses. Este último par de () faz com que a função seja executada assim que for avaliada.
Por que esse último conjunto de () é tão importante? Sem esses parênteses, a variável precisaria ser chamada ou executada em algum outro lugar do código. Como esta é uma função anônima, não há nome ou variável para fazer referência e chamar. Apenas para ilustrar meu ponto, vamos dar uma olhada em uma definição de função normal.
função
foo () {
alert ("foo"
);
}
Este é uma definição de função bastante básica e cria uma função JavaScript chamada foo. No entanto, ele não é executado quando o código é avaliado pelo mecanismo JavaScript. Ele ainda precisa ser chamado para fazer com que a caixa de alerta seja exibida.
http://jsfiddle.net/docluv/3qXyp/
Mas se usarmos uma função autoexecutável anônima, o alerta será exibido automaticamente quando o código for avaliado.
(function () {
alert (“foo”);
} ());
http://jsfiddle.net/docluv/nY7cC/1/
E se você não quiser que a caixa de alerta seja exibida automaticamente? É aqui que essas funções autoexecutáveis se tornam muito úteis. Você pode definir objetos ou variáveis dentro da função anônima e chamá-los de fora da definição da função. Normalmente você deseja definir um único objeto ou função dentro do invólucro anônimo, mas, em teoria, você pode definir vários objetos.
Primeiro, vamos definir uma função dentro do invólucro anônimo.
(função
() {var
foo=função
() {
alert ("foo"
) ;
};
foo ();
} ());
http://jsfiddle.net/docluv/49pJv/1/
Na definição de função acima, uma variável chamada foo é instanciada dentro do método anônimo. É definido como uma função que chama o método de alerta. Depois que a variável é definida, ela é chamada, dentro do invólucro anônimo. Eu fiz isso para provar um ponto. Se você colocar a chamada foo () fora da definição de função anônima, receberá um erro porque foo não existe fora do compartimento. Isso é bom porque evita que você polua o namespace global, etc. Qualquer variável definida dentro do invólucro está disponível enquanto a função anônima está sendo executada. Portanto, chamei foo no final do anexo e você obterá a caixa de alerta exibida.
Então, como você pode acessar o (s) objeto (s) definido (s) em uma função anônima? A maneira mais fácil é criar uma variável global ou estender um objeto global existente, como jQuery. Isso é o que jQuery faz. Quando você estende o jQuery com um plugin ou método de extensão, está fazendo a mesma coisa estendendo o jQuery.fn. O exemplo a seguir segue o padrão usado na biblioteca jQuery.
(função
() {var
foo=função
() {
alert ("foo"
);
};return
(window.foo=foo);
} ());
foo ();
http://jsfiddle.net/docluv/RcALA/2/
Agora se você deseja criar um novo objeto JavaScript, você pode. Basta adicionar membros conforme necessário e eles podem ser chamados de seu código como o seguinte:
(função
() {var
foo=função
() {
};
foo.fooo=função
() {
alert ("foo"
);
};
foo.bar=função
( ) {
alert ("bar"
);
};return
(window.foo=foo);
} ());
foo.fooo ();
foo.bar () ;?
http://jsfiddle.net/docluv/ZJJSp/4/
Ok, agora fica real, não é? Peguei a definição anterior e a estendi. A variável foo é estendida com duas definições de função, fooo e bar. Se você olhar para o objeto foo em uma janela de observação, como as ferramentas F12 do IE, as Ferramentas do desenvolvedor WebKit ou FireBug, você verá algo assim:
foo: function () {
argumentos: null
bar: function () {
caller: null
fooo: function () {
length: 0
name:””
prototype: Object
__proto__: function Empty () {}
Você notará que contém as duas definições de função fooo e bar. Isso ocorre porque o objeto foo original foi estendido logo após ser definido. Como não há nada para inicializar em foo, podemos apenas usar a instância global para chamar os dois métodos filhos. Agora vamos estender o objeto foo para fora do recinto anônimo com um novo método, baar. Ele exibirá uma caixa de diálogo de confirmação em vez de uma caixa de alerta enfadonha.
(função
() {var
foo=função
() {
};
foo.fooo=função
() {
alert ("foo"
);
};
foo.bar=função
() {
alert ("bar"
);
};return
(window.foo=foo);
} ());
foo.baar=function
() {
confirm ("legal hein?"
);
};
foo.fooo ();
foo.bar ();
foo.baar () ;?
http://jsfiddle.net/docluv/JhYSr/1/
Você pode estender o método como qualquer outro objeto JavaScript, que é como um plug-in jQuery estende jQuery. Na verdade, você pode incluí-lo em seu próprio método anônimo.
(função
() {var
foo=função
() {
};
foo.fooo=função
() {
alert ("foo"
);
};
foo.bar=função
() {
alert ("bar"
);
};return
(window.foo=foo);
} ());
(função() {
foo.baar=função
() {
confirm ("legal hein?"
);
};
} ());
foo.fooo ();
foo.bar ();
foo.baar () ;?
http://jsfiddle.net/docluv/JhYSr/2/
Por que é é importante saber ou mesmo se preocupar com você pode perguntar? Bem, um plugin normalmente é feito em seu próprio arquivo, não no arquivo jQuery principal. Um dos principais benefícios de usar um invólucro JavaScript anônimo é fornecer uma espécie de firewall. Se você olhar o código-fonte do jQuery, notará como as variáveis são passadas para o método de fechamento anônimo.
(função
(janela, indefinida) {//...jQuery vai aqui
) (janela);
Primeiro é o próprio objeto de janela, não estou muito claro por que esse parâmetro está sendo passado, mas vejo isso muito feito em várias bibliotecas JavaScript. O objeto window está disponível dentro do método anônimo porque é o objeto global. Mas o segundo parâmetro é bastante engenhoso, indefinido. Por que você deve seguir esse padrão? É uma técnica de programação defensiva. A maioria de nós usa muitas bibliotecas de terceiros, muitas das quais são apenas coisas gratuitas que encontramos online. Muito poucos de nós dedicamos tempo para revisar cada linha de código nessas bibliotecas, sério, ninguém o faz. Além disso, uma vez que eles são minimizados, torna-se extremamente difícil de fazer. Quem pode dizer que alguém não colocou a seguinte linha em seu código:
undefined=function () {//O código do cérebro para dominar o mundo};
Ao definir uma variável chamada undefined, mas não passando nada para essa variável, ela é automaticamente definida como o undefined que conhecemos e amamos.
Mas espere, tem mais. Você pode passar quaisquer variáveis que desejar para um invólucro anônimo para ter certeza de que são o que você deseja que sejam. Um exemplo comum é que jQuery é comumente referido com o uso da variável $ em vez de jQuery. Portanto, o seguinte anexo garantirá que $ seja jQuery e não outra coisa.
(função
(janela, $, indefinido) {//...seu código vai aqui
) (janela, jQuery);
Agora, é claro que alguém poderia renomear jQuery como quiser, mas você já deve ter entendido o ponto agora. Eu uso essa técnica para inicializar ou criar objetos para parâmetros que não existem. No exemplo a seguir, eu uso uma técnica de coalescência para criar um objeto vazio para representar foo se ele não existir.
(função
(janela, foo, indefinido) {//...jQuery vai aqui
) (janela, foo || {});
Conclusion
Funções anônimas autoexecutáveis são padrões de codificação muito importantes que todo programador de JavaScript deve aprender a usar diariamente. Eles fornecem uma boa maneira de organizar seu código, permitem que ele seja estendido e fornecem uma camada simples de defesa variável.
