How to implement the Module design pattern in JavaScript

Question

I am reviewing some design patterns in JavaScript. My first design pattern is the module pattern. After researching a bit I built the following example:

var CarCostEstimation = (function() {

    //Let's imagine script is getting best price from different api's
    function getBestMotorCost() {

        return 3000;
    }

    function getBestChasisCost() {
        return 1000;
    }

    function getBestWheelsCost() {
        return 400;
    }

    return {
        getEstimatedCost: function() {
            var chasisCost = getBestChasisCost();
            var motorCost = getBestMotorCost();
            var wheelsCost = getBestWheelsCost();

            return chasisCost + motorCost + wheelsCost;
        }
    }

})();

var totalCost = CarCostEstimation.getEstimatedCost();
console.log(totalCost);

I have two doubts:

If the way I am calling the "private" methods, in my public method is the correct one.
If I want to add this CarCostEstimation module to another Estimation module, how would it do it?

For point 2:

var CostEstimation = (function() {

    var estimationObject;

    function sumDifferentEstimations() {
        estimationObject.getEstimatedCost();
    }

    return {
        addEstimationObjetc: function(object) {
            estimationObject = object
        },

        getTotalCost: function() {
            return sumDifferentEstimations();
        }
    }

})();

1) Yes, that's correct. 2) var Estimation = { CarCost: CarCostEstimation }; — castletheperson
– castletheperson, Commented Jul 18, 2017 at 21:54
@4castle thanks for your comment, what about my update, would that be also an option? — Eduardo
– Eduardo, Commented Jul 18, 2017 at 21:58
Yep! The module pattern isn't all that strict. As long as you've got an IIFE and you're only returning the public interface, you're good. — castletheperson
– castletheperson, Commented Jul 18, 2017 at 22:02

Caio Doneda · Accepted Answer · 2017-07-19 00:01:21Z

2

Another way to define your functions. (I'm also using some ES6 syntax)

    const CarCostEstimation = function() {
      return {
        getBestMotorCost: () => 3000,
        getBestChasisCost: () => 1000,
        getBestWheelsCost: () => 400,
        getEstimatedCost: function() {
          const chasisCost = this.getBestChasisCost();
          const motorCost  = this.getBestMotorCost();
          const wheelsCost = this.getBestWheelsCost();

          return chasisCost + motorCost + wheelsCost;
        }
      }
    }();

    const totalCost = CarCostEstimation.getEstimatedCost();
    console.log(totalCost);

To export your function as a module, you could use the export statement from ES6 and import your module using the import statement

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

answered Jul 19, 2017 at 0:01

Caio Doneda

513 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement the Module design pattern in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related