Best ways to use Module Pattern in javascript

Asked

Viewed 201 times

4

I am working on a project and using the standard Module Pattern javascript. But during the implementation of the project I had some doubts.

First doubt:

Is there any difference between the two ways of using the "Immediately-Invoked Function Expression (IIFE)"

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

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

Ben Alman, author of the article: Immediately-Invoked Function Expression (IIFE) implements in the first way.

Ja Addy Osmani, author of the book: Learning Javascript Design Patterns implements the second way.

I wonder if there is some kind of technical difference between these two forms. Or are they just two different ways to do the same thing?

2nd doubt:

I thought it would be interesting to add sub modules within my main module. But I looked at several examples and links related to the subject and found no approach using sub modules. Then I was in doubt, whether I should do it or not. The use of sub modules can cause me future problems or pollute my code?

  • 1

    Alan, there is no problem in creating a module within another, including what the Vanilla Masker does. when it comes to performance, recommendations and difference of execution in the IIFE calls, it does not exist, being only a matter of style, but the second mode is more common.

  • I was using the second form msm! thanks! ;)

1 answer

5


Regarding your first question: both are equivalent, it’s a matter of preference:

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

Edit:

I got into the conversation in the Javascript chat of Soen and Reddit and rightly mentioned that with the syntax of flexa functions, the second syntax does not work(!). Which makes perfect sense.

Example:

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

The 4 never appears...

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


Regarding your second question, use eyelashes to limit the scope whenever you want. The reason why we don’t use much "submodules" is because the concept of module (or good practices) is to make each module as simple and re-usable as possible. Thus being a module should never get so big that it needs submodules. But there is no harm in creating them.

By the way, one aside, I think you should look at the Common JS modules or better yet new syntax that is coming with `import. This allows you to separate modules into files and with a compiler like Babel, Webpack or Browserify you can convert this into "old" Javascript and run in the browser...

  • Got it! Thanks for the tips. I’ll give you a read on what you said. :)

  • @Alan Great to have helped. Take a look at this new syntax, so you’ll be more up to date too. See you soon.

  • @Alan made an important Edit... take a look again.

  • Beauty! thanks for the correction. But I had not yet seen "flexa functions". I will give a study to understand what they do and how they work! ;)

  • @Alan http://answall.com/q/143399/129

  • Oops! Thanks! Just one more question. I use the sublime text. And I just installed the Babel package for him. But it seems that it is a package to change only the syntax of the code. Can you tell me if it is possible to convert ES6 to ES5 in the sublime with the Babel package?

  • @Alan do not know the sublime text... but you can check here how to use Babel http://answall.com/a/146397/129 or convert online here: https://babeljs.io/repl/

  • Blz! Thanks for the tips!

  • Sergio, the comments are gone with the links and tips you passed here. You deleted?

  • @Sorry, I wanted to make the page cleaner. But if they are still useful I leave it. I put it back now.

  • Oops! had a link q I still n had saved! But now saved it. If you want, can clear the comments now! ;)

Show 6 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.