Understanding module design pattern in javascript

Question

I am not very good in JavaScript. so when I saw a block of code now then many area is not clear. So someone please help me to understand.

I know this below way people declare their module

var Module = (function () {
  var privateMethod = function () {
    //A Private Method
    var privatemember; // scope is only private method
  };
  return {
    publicMethod: function () {
      //you can call private method here.
    }
  };
})();

Module.publicMethod(); //works

Just I saw another bit different code for module pattern as follows where knockout.js is used.

var HMS = HMS || {};

$(function () {

    HMS.PatientModel = function () {
        this.Patient_Name = ko.observable();
        this.Patient_Address = ko.observable();
    };

    HMS.PatientViewModel = function () {
        var patient = ko.observable(),
        loadPatient = function () {
            var newModel = new HMS.PatientModel();
            newModel.Patient_Name("Premkumar");
            patient(newModel);
        };
        return {
            patient: patient,
            loadPatient: loadPatient
        };
    } ();


    HMS.PatientViewModel.loadPatient();

    ko.applyBindings(HMS.PatientViewModel);

});

1) What is this code var HMS = HMS || {}; ?

2) See this $(function () {}) ();

Why module has no name specific. see my first code where I give a name to my module like this way var Module = (function () {}) ()

3) Inside module code every function name has started with HMS.............why like HMS.PatientModel = function () { };

Please help me to understand the second set code point wise. Thanks

curios to ask multiple question, but did you research for each individually? — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jul 3, 2015 at 19:53
i am not advance js developer. so the code which i highlighted here was confusing me. so i asked and looking for some one help. thanks — Thomas
– Thomas, Commented Jul 3, 2015 at 20:00
I'll give you a quick answer. If you're interested in research. — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jul 3, 2015 at 20:01
Are you familiar with JS logical values truthy and falsey? Do you know how JS variables scoped and what closures are? — PM 77-1
– PM 77-1, Commented Jul 3, 2015 at 20:02
if possible redirect me to right article from where i can acquire the knowledge of JS variables scoped & closures. thanks — Thomas
– Thomas, Commented Jul 3, 2015 at 20:08

Community · Accepted Answer · 2017-05-23 12:34:58Z

1

var HMS = HMS || {};

that expression defines the var HMS to HMS or empty object if it is not defined is a short hand for

if(HMS) {
  var HMS = HMS;
} else {
  var HMS = {};
}

2) You are creating an object from an IIFE

They are declaring and empty object if it does not exist, and decorating it with the methods/functions once the function below its executed. is the same as this:

var HMS = {
   PatientModel : function () {},
   PatientViewModel : function () {}, 
}

3) And that is why they use HMS inside the function.

var HMS = {};
HMS.PatientModel = function() {};
HMS.PatientViewModel = function() {};

You should read about Closures, IIFE, and How to “properly” create a custom object in JavaScript?

Sample and short explanation of closure:

A closure is when you have access to variables that are not in the lexical scope of the function For example, a function declared inside another function, will have access to the parent variables.

eg:

(function(){
    var a = 1;

    function mainFunction() {

        function innerFunction() {
            var b = 2

            function subFunction() {
                console.log(a); //We have access to "a" here.
                console.log(b); //We have access to "b" here.
            }

           subFunction();
        }


        innerFunction();
        console.log(a); //We have access to "a" here.
        console.log(b); //We dont have access to "b" here. //error
    }
    mainFunction();

})();
console.log(a);  //We dont have access to "a" here. //error

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jul 3, 2015 at 20:01

ecarrizo

2,80919 silver badges29 bronze badges

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

4 Comments

Thomas Over a year ago

the code i posted related to module design pattern if yes then why they did not specify any name for his module ?

Thomas Over a year ago

does the Closures mean when a main function will have inner function then inner function will be called Closures? am i right ?

ecarrizo Over a year ago

I should post a closure example give me a minute.

ecarrizo Over a year ago

I've updated the example but basically a closure is when you create a function inside a function, the inner function should have access to the parent scope variables. I recomend to you to read the linked "closures" link is better explained there.

Community · Accepted Answer · 2017-05-23 10:32:37Z

1

1) what is this code var HMS = HMS || {}; ?

If HMS is undefined HMS is to be equal to an empty object otherwise use HMS as is (in your case HMS is an object).

2) see this $(function () {}) ();

It's called IIFE.

3) why like HMS.PatientModel = function () { };

HMS is an object and just adding its property with value. Value may be anything.

4) From your comment in another answer, why they didn't define module name?

They have defined the module name as Module. See var Module = (function(){}());

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 3, 2015 at 20:07

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

2 Comments

Thomas Over a year ago

this is from var Module = (function(){}()); 1st set code and i am curious about second set code. 1st set code i understand. thanks

Thomas Over a year ago

does the Closures mean when a main function will have inner function then inner function will be called Closures? am i right ?

Collectives™ on Stack Overflow

Understanding module design pattern in javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related