8

Estive olhando alguns projetos de exemplo em AngularJS e me deparei várias vezes com o seguinte código:

(function () {
    angular.module('meuModulo', [
        'alguma.dependencia',
        'outra.dependencia'  
    ]);
})();

Este mesmo código, no padrão que estou acostumado, seria:

angular.module('meuModulo', [
    'alguma.dependencia',
        'outra.dependencia'  
    ]);

Ou seja, o código foi colocado dentro de uma function.

Há alguma diferença entre o primeiro e o segundo exemplo? Se sim, quais são as vantagens de se usar a primeira abordagem ao invés da segunda?


O código acima é apenas um exemplo de uma criação de um módulo em AngularJS.

5
  • 2
    Modularização em JavaScript Commented 30/03/2016 às 13:53
  • Isso é um encapsulamento autoexecutado. Eu responderia, mas não tenho conhecimento de Angular para afirmas uma resposta. Commented 30/03/2016 às 13:54
  • Esta função tem a propriedade de fazer um autoload (funcion(){ ... })(), ou seja, ele autoexecuta o que está dentro. Commented 30/03/2016 às 13:55
  • Obrigado pelo link @GuilhermeLautert
    – Jéf Bueno
    Commented 30/03/2016 às 13:57
  • Quando você encapsula, significa que os elementos dentro do módulo, serão autoexecutados... como get, http, etc... Commented 30/03/2016 às 13:57

4 Respostas 4

6

O trecho 1 contém uma função de Função Imediatamente Invocada ou Immediately-Invoked Function Expression (IIFE).

Envolver seus componentes AngularJS numa expressão na forma de função imediatamente chamada ajuda a evitar que variáveis ​​e declarações de funções vivam mais tempo do que o esperado no escopo global, o que também ajuda a evitar colisões variáveis.

Isso se torna ainda mais importante quando o código está reduzido e empacotado em um único arquivo para implantação em um servidor de produção, fornecendo o escopo de variáveis ​​para cada arquivo.

Referencia: AngularJS Guidelines

Tem um artigo bem bacana em português sobre estas funções: JavaScript IIFE

0
4

A diferença dos dois códigos tem a ver com o tipo de escopo de variável implementado em JavaScript. JavaScript utiliza um escopo de função, ao invés do escopo em bloco utilizado por linguagens como C e Java.

Encapsulando a criação de modules dentro de uma função anônima faz com que todas as variáveis criadas dentro da função não sejam acessíveis fora da função.

Exemplo básico:

(function() {
    var variavelLocal = 12;
    document.write(variavelLocal);
})();

document.write(variavelLocal);

Perceba que o código acima exibe o valor 12 apenas uma vez, o document.write de dentro da função anônima. O segundo document.write lança uma excecão, se você abrir o console do seu navegador vai ver o erro:

stacksnippets.net/js:18 Uncaught ReferenceError: variavelLocal is not defined

Quanto ao seu exemplo específico, não faz diferença alguma, visto que nenhuma variável é criada, então o escopo não importa nesse caso.

4

O primeiro formato isola a função de variáveis declaradas no escopo global. Assim, todas as variáveis declaradas dentro da função ficam restringidas ao escopo desta, não influenciando o escopo global.

2

Isto é uma IIFE Expressão de Função Imediatamente Invocada ou Immediately-Invoked Function Expression, ela é como se fosse um "modulo" autoexecutável que encapsula o código evitando colisões no escopo global.

Ela também evita colisões de variáveis no escopo global caso o codigo venha a ser minificado em um único arquivo.

Está é uma pratica difundida na comunidade angular pelo famoso Style Guide do John Papa. Recomendo você dar uma olhada pois existem muitas dicas legais de boas praticas para Angular 1 e 2 -> John Papa's Angular style guide

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .