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, Jul 03 '15 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, Jul 03 '15 at 20:00
I'll give you a quick answer. If you're interested in research. — Bhojendra Rauniyar, Jul 03 '15 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, Jul 03 '15 at 20:02
if possible redirect me to right article from where i can acquire the knowledge of JS variables scoped & closures. thanks — Thomas, Jul 03 '15 at 20:08

score 1 · Accepted Answer · edited May 23 '17 at 12:34

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

the code i posted related to module design pattern if yes then why they did not specify any name for his module ? — Thomas, Jul 03 '15 at 20:04
does the Closures mean when a main function will have inner function then inner function will be called Closures? am i right ? — Thomas, Jul 03 '15 at 20:20
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. — ecarrizo, Jul 03 '15 at 20:37

score 1 · Answer 2 · edited May 23 '17 at 10:32

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 '17 at 10:32

Community

1
1

answered Jul 03 '15 at 20:07

Bhojendra Rauniyar

83,432
35
168
231

this is from `var Module = (function(){}());` 1st set code and i am curious about second set code. 1st set code i understand. thanks – Thomas Jul 03 '15 at 20:10
does the Closures mean when a main function will have inner function then inner function will be called Closures? am i right ? – Thomas Jul 03 '15 at 20:19

Understanding module design pattern in javascript

2 Answers2

Linked

Related