Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between using a module pattern and instantiating new objects

I'm trying to restructure some javascript and I'm confused about the module pattern.

One way I have now is to simply declare a class containing all the functionality for a component like so

var Foo = function(){
    this.Bar = {};
    ...
}

and create a new instance for use in the component. But I've also read about the module pattern and I can't see what the benefit would be compared to what I have since it appears to do about the same, just in a more complicated way. Maybe I just haven't encountered the case that makes it a better choice. For example, a pattern like this:

var module = (function () {
    // private variables and functions
    var foo = 'bar';

    // constructor
    var module = function () {
    };

    // prototype
    module.prototype = {
        constructor: module,
        something: function () {
        }
    };

    // return module
    return module;
})();

var my_module = new module();

doesn't appear significantly different from what I already had. What does this pattern let me do that I can't do the other way?

like image 543
Valyrion Avatar asked Oct 16 '14 14:10

Valyrion


People also ask

Why is it important to use the module pattern in JavaScript?

The Module pattern is used to mimic the concept of classes (since JavaScript doesn't natively support classes) so that we can store both public and private methods and variables inside a single object — similar to how classes are used in other programming languages like Java or Python.

When would you use the revealing module pattern?

The Revealing Module pattern can easily imitate either the Class Pattern or the Namespace Pattern with the added advantage of private state and private functions. This is most helpful in Scoped Applications where the app developer may prefer to keep implementation details hidden while exposing clear public interfaces.

Which is the correct way to define a module pattern?

In software engineering, the module pattern is a design pattern used to implement the concept of software modules, defined by modular programming, in a programming language with incomplete direct support for the concept.

What is modular design pattern JavaScript?

JavaScript modules are the most prevalently used design patterns for keeping particular pieces of code independent of other components. This provides loose coupling to support well-structured code. For those that are familiar with object-oriented languages, modules are JavaScript “classes”.


1 Answers

The key difference between the two is in the first example, you can't have private variables and functions if you want to work with the prototype. You can have private variables and functions, but only if your public properties and methods are created in the constructor by attaching them to this.

Example 1 with a private variable and function:

var Foo = function(){
    var privateVar = "priv";

    function privateFunction(){
        console.log(privateVar);   
    }

    this.publicProperty = 1;

    this.publicFunction = function(){
        console.log(privateVar);
    }
}

The above is no problem if you don't want to use the prototype. However, if you do then there is no way to have private variables, without the new scope that your second example benefits from.

As you can see, you have to include everything within the constructor, whereas the second example you can leave the constructor just for initialising variables.

Conversely, the prototype methods in the second example are out of scope of the constructor, so they can't use any variables of functions within the constructor. All functions and variables that the prototype methods need must be declared in the outer closure scope.

like image 153
MrCode Avatar answered Sep 26 '22 19:09

MrCode