How-to write efficent JS Constructors (module pattern/prototype)

[Giu Tae Kim]

Hi. I really need information about the correct way to write JavaScript Constructors. The goal is to develop the logic behind a couple of UI components for a personal project.

For example. I need to setup a Slider, and I want to call the slider like this:

// Create frontpage Slider
var front_slider = new pluginName(HTMLDOMobject,{options});

Ok, until now I have created this stuff calling some function with the “new” tag:

// Slider Constructor
function pluginName(element,options) {
   
   // get other elements
   // events for elements
   // functions related to events
   // ... more logic
   
}

OK. This works. But there is something that I really can’t get… why all others .js developers follow totally different ways to manage constructors. I have the strong feeling that my way of managing constructors is totally wrong.

For example, I noticed that in general they wrap code inside an anonymous IIFE function, and in some point of the function they make an object return. Also I noticed the strong use of the prototype Object, and object literals for a lot of stuff. I’ve heard a lot about module patterns and inheritance but I can’t get how to implement that stuff in a practical way. Here I have and example of javascript plugins I see nowadays:

(function(){
   
   var pluginName = function() {
      ... stuff
   };
   
   pluginName.prototype = {
      ... methods
   };
   
   return pluginName;
   
})();

I really want to master JS. I really want to understand the way to create efficent constructors, using prototype and a good plugin structure. I have search for javascript plugin boilerplates and templates but the only things I found were very confussing codes. Like this one: https://gist.github.com/cferdinandi/ece94569aefcffa5f7fa

Please if you can give me a hand, info or some examples… I really aprecciate. Thanks!

[Author]

Posts