CODEWITHSUNDEEP
javascript
Thomas
Thomas

Reputation: 34218

Understanding module design pattern in javascript

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

Upvotes: 0

Views: 102

Answers (2)

ecarrizo
ecarrizo

Reputation: 2809

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

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(){}());

Upvotes: 1

Related Questions