4

Estou trabalhando em um projeto e utilizando o padrão Module Pattern no javascript do mesmo. Mas durante a implementação do projeto me surgiram algumas dúvidas.

1º Dúvida:

Existe alguma diferença entre as duas formas de utilização do "Immediately-Invoked Function Expression (IIFE)"

var modulo = (function() {
   //codigo
}());

var modulo = (function() {
   //codigo
})();

Ben Alman, autor do artigo: Immediately-Invoked Function Expression (IIFE) implementa da primeira forma.

Ja Addy Osmani, autor do livro: Learning JavaScript Design Patterns implementa da segunda forma.

Gostaria de saber se existe algum tipo de diferença técnica entre essas duas formas. Ou são apenas duas formas diferentes para se fazer a mesma coisa?

2º Dúvida:

Achei que seria interessante adicionar sub módulos dentro do meu módulo principal. Mas procurei em varios exemplos e links relacionados ao assunto e não encontrei nenhuma abordagem utilizando sub módulos. Então fiquei na dúvida, se devo ou não fazer isso. O uso de sub módulos pode me acarretar problemas futuros ou poluir o meu código?

2
  • 1
    alan, não existe problema algum em criar um modulo dentro de outro, inclusive é o que o Vanilla Masker faz. quando à desempenho, recomendações e diferença de execução nas chamadas IIFE, não existe, ficando apenas uma questão de estilo, porém o segundo modo é mais comum. Commented 2/09/2016 às 19:48
  • Estava utilizando a segunda forma msm! valeu! ;)
    – alan
    Commented 2/09/2016 às 21:52

1 Resposta 1

5

Em relação à tua primeira pergunta: ambas são equivalentes, é uma questão de preferência:

(function () { … })(); <-- a melhor (ver edit em baixo)
(function () { … }());

Edit:

meti-me à conversa no chat de JavaScript do SOen e no Reddit e referiram com razão que com a sintaxe de funções flexa, a segunda sintaxe não funciona(!). O que faz todo o sentido.

Exemplo:

(function (nr) { console.log(nr);})(1);
(function (nr) { console.log(nr);}(2));
(nr => console.log(nr))(3);
(nr => console.log(nr)(4));

o 4 nunca aparece...

jsFiddle: https://jsfiddle.net/ymwj2c8z/


Em relação à tua segunda pergunta: usa IIFEs para limitar o escopo sempre que quiseres. A razão pela qual não se usa muito "submodulos" é porque o conceito de módulo (ou as boas práticas) é fazer cada módulo tão simples e re-utilizavel quanto possivel. Assim sendo um modulo nunca deve ficar tão grande que precise de submodulos. Mas não há mal nenhum em os criar.

Já agora, um à parte, acho que devias olhar para os modulos de Common JS ou melhor ainda da nova sintaxe que aí vem com `import. Isso permite separar módulos em ficheiros e com um compilador como o Babel, Webpack ou Browserify podes converter isso em JavaScript "antigo" e correr no browser...

11
  • Entendi! Valeu pelas dicas. Vou dar uma lida nisso que você falou. :)
    – alan
    Commented 2/09/2016 às 20:20
  • @alan Ótimo ter ajudado. Dá uma olhada a essa sintaxe nova, assim vais estar mais atualizado também. Até breve.
    – Sergio
    Commented 2/09/2016 às 20:24
  • @alan fiz um edit importante... dá uma olhada de novo.
    – Sergio
    Commented 2/09/2016 às 20:34
  • Beleza! valeu pela correção. Mas ainda não tinha visto "funções flexa". Vou dar uma estudada para entender o que elas fazem e como funcionam! ;)
    – alan
    Commented 2/09/2016 às 20:41
  • @alan pt.stackoverflow.com/q/143399/129
    – Sergio
    Commented 2/09/2016 às 20:46

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 .