Is there a recommended design/architecture when developing a JavaScript module?

Question

Practicing some of the ES7 features, I started developing a class to perform some actions on the DOM and use the new features. I used Babel to make it work on the browser, and the code looks something like this:

class myModule {
  constructor() {
    this.myProperty = 1;
  }
  myMethod = () => {
    //...
  }
  //...
}

Now I wanted to make it work as a small plugin/module/library in vanilla JS. Started looking on this site and online, and saw that the architecture of the different plugins/modules that I found looks like one of these:

1. Using prototype

   var myModule = function() {
     this.myProperty = 1;
   }
   myModule.prototype.myMethod = function() {
     //...
   }
   //...
   

2. Using an object:

   var myModule = {
     myProperty: 1,
     myMethod: function() {
       //...
     }
     //...
   }
   

3. Using a immediately/self invoked function:

   var myModule = (function() {
     var myProperty = 1; 
     this.myMethod = function() {
       //...
     }
     //...
     return this;
   })();
   

4. Using a regular function (and initializing with new):

   var myModule = function() {
     this.myProperty = 1; 
     this.myMethod = function() {
       //...
     }
     //...
   };
   

5. Using a function that returns an object (seems like a combination of 2 and 4, there are some variants):

   var myModule = function() {
     var myProperty = 1; 
     function myMethod() {
       //...
     }
     return {
       myProperty: myProperty,
       myMethod: myMethod
     }
   };
   

The compiled code with Babel looks like the 4th on this list, and I left it like that; but, is it better to use one of the other methods (or a different way all together)? And by "better" I mean a best practice or standard way of designing them.

Answer 1

I'm sure you know that Babel is just insuring that older browsers can understand your code. How you write your code, is no so important as how you break it up into modules. Use classes, use Constructor Functions, it does not matter. It all gets compiled by the browser, and the browser does not care what you use. Google does have some recommendations, and best practices, Google Best Practices that mesh well with there optimizations in V8, but that is just Chrome...and maybe down the road, Edge. Best Practices have nothing to do with whether you use a function declaration, or class syntax because under the hood they all get optimized away by the JS engine. There are some things to avoid, like nesting iff's, or creating functions with nested control flow logic, not implementing good code design like Observer Patterns and Factory Patterns, keep your functions simple, give them only one reason to change. Match implementation and interfaces Design Patterns: Elements of Reusable Object-Oriented Software p25 I prefer Constructor Functions, over classes. Because you can implement static, private, and protected code easier without babel, using babel for async functions and generators that is if I'm not using something like Axios or async. My advice, write how you want, follow good design patterns, and have fun. Happy Coding!